I've just put together a nice form which has taken me hours, with some natty jQuery focusout validation. The focusout attribute is attached to the input fields onload. I then re-use my validation functions by triggering the focusout event onsubmit, but what I don't know is how to disable the form submitting if any of my validation functions failed. Full example here (jsfiddle)
Cutdown example:
addLoadEvent(AttachVal);
function AttachVal(){
$('input[name="FirstName"]').focusout(NameTest); $('input[name="LastName"]').focusout(NameTest); $('form[name="Register"]').submit(SubmitRegForm);
}
function SubmitRegForm(){
$('input[name="FirstName"]').trigger('focusout'); $('input[name="LastName"]').trigger('focusout'); alert ("Submitting");
return false;
}
Validation function:
function NameTest(){
var result = true;
var EnteredValue = $(this).val();
var alphaExp = /^[a-zA-Z ]+$/;
if (!(EnteredValue.match(alphaExp)))
{
var result = "Invalid";
}
if (result !== true)
{
$(this).parent().next().children('span.ErrorDescript').text(result);
}
else
{
$(this).parent().next().children('span.ErrorDescript').text("");
}
}
I tried attaching a variable in the SubmitRegForm function like this:
var FNStat = $('input[name="FirstName"]').trigger('focusout');
with the intention to check them all and submit if they all return true, but that just returns a object. Is it possible to get the response text from that function?...maybe? Or is there another way to force a halt of a Submit event that's currently running from within my individiual validation functions?
As always, any advice greatly appreciated.
Dan
Here's an updated fiddle. What I did was in the return of the SubmitRegForm() method just see how many tick images are visible and if it's zero go ahead and submit the form.