Ajax form validation

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?
 
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 :)
 
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!
 
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 :)
 
Here's one I have written -
PHP:
function call(data,id,process,wait){
var request=false;
try{request = new XMLHttpRequest()}
catch(error){
try{request = ActiveXObject("Microsoft.XMLHttp")}
catch(error){return true}
}
if(request){
var b=document.getElementById(id);
request.open("post",data,true);
request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
request.setRequestHeader('If-Modified-Since','thr,06 apr 2007 00:00:00 GMT');
request.onreadystatechange=function(){
if(request.readyState==1){
b.innerHTML=wait;
}
if(request.readyState==4 && request.status==200){
document.getElementById(id).innerHTML=request.responseText;
delete request;
request=null;
}
}
request.send(process);
}
}
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.
Jaz

Key ~
Red - JavaScript.
Blue - Hypertext Preprocessor
Purple - Extensible Hypertext Markup Language
 
Jazajay thank you very much!

I'm gonna find a few hours to sit down and go through that method! thanks very much!!!:clap:
 
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.

Jaz
 
Back
Top