Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Ajax form validation

Discussion in 'Website Design Forum:' started by tbwcf, Nov 21, 2008.

  1. tbwcf

    tbwcf Active Member

    I need to use form validation on a few projects and intended to do it using ajax. Does anyone have any suggestions on a good open source script?
  2. slightlymore

    slightlymore Junior Member

    It's not AJAX, but I quite like this jQuery plugin digitalBush Masked Input Plugin

    And one piece of advice - just because it's AJAX validated, doesn't mean that it's always going to be validated, so make sure that you validate it server side too (people can turn off JS etc etc and all that boring stuff).

    If you find any good implementation, post a link, I'd be interested to have a look too :)
  3. tbwcf

    tbwcf Active Member

    that looks cool - thanks! not quiet what I'm after for this particular job but I'm sure I can make use of that in the future! I thought of the server side bit after looking into this more, although this campaign uses a system called pageflex to pre-fill/populate/personalise webforms emails and print so not sure how I can go about the server side validation.... it also has a tendancy to strip out code such as js so I can see this becoming a real headache.

    Here's a few of interest I'm looking into...

    LiveValidation - Validation as you type

    Mutationevent :: Validate.js :: exemples

    Clean Form Validation

    Thanks for sharing the digital bush plugin!
  4. slightlymore

    slightlymore Junior Member

    I like the look of the clean form validation link (infact just subscribed to his RSS feed). If I think of any others or stumble upon anything useful, I'll post them here too :)
  5. Jazajay

    Jazajay Active Member

    Here's one I have written -
    function call(data,id,process,wait){
    request = new XMLHttpRequest()}
    request ActiveXObject("Microsoft.XMLHttp")}
    error){return true}
    request.setRequestHeader('If-Modified-Since','thr,06 apr 2007 00:00:00 GMT');
    request.readyState==&& request.status==200){
    delete request;
    Right now this is a function that is called in like this-
    onlclick="call('path/to/file/you/want/to/call','id where you want to load the page into','var=b','Text to display to the user while the page loads');"

    var=b is the post data you want to send.
    On the page you are calling if you just echo out echo $_POST['var']; b would be outputted. To add more post variables just add the & sign followed by the varaible name followed by what you want it to equal.

    If you prefer get varaibles to pass just add them to the end of the path name. So for example if you had this ~
    <button type="submit" onclick="call('inc/ajax.php?a=a','document.getElementById('form')','b=b&c=c','Your details are being sent, please wait for conformation......');"">Send</button>

    Once the button was clicked the element with the id of form would be changed and would display Your details are being sent, please wait for conformation......

    If the file is being referanced properly and you write
    echo" a=".$_GET['a']." b=".$_POST['b']." c=".$_POST['c'];
    as the contents of ajax.php located in the same directory as this js funstion then ~

    The form id inner contents would then be changed to ~
    a=a b=b c=c

    This can then be used as many times as you want.
    I have also optimized it by deleting a request if the button is clicked more than once, this helps to speed up the process if the user is inpatient and clicks the button multiple times thus helping to minimalize browser freezes if the user is on a slow connection and having shed loads of calls all going on at once.

    The query can be optimized further by having it cached the first time making all substitant AJAXian querys load faster, however I have not bothered going this far on this one as I use advanced preformance optimization techniques that do not require this, I can add it if you would like however.

    Hope it helps and is what you are looking for.

    Key ~
    Red - JavaScript.
    Blue - Hypertext Preprocessor
    Purple - Extensible Hypertext Markup Language
  6. tbwcf

    tbwcf Active Member

    Jazajay thank you very much!

    I'm gonna find a few hours to sit down and go through that method! thanks very much!!!:clap:
  7. Jazajay

    Jazajay Active Member

    Thats alright tbwcf, I'm just glad I could help you.

    If it does not work let me know.

    I never indent my code and this was part of the object literal way of writting JavaScript so I had to modify it back to a normal function.

    It looks like I have copied and change the right section where nesercary but let me know if you have any problems with it and I'll/or someone else here will help you through it if you have any problems or if just want to understand it better.


Share This Page