Question

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

Answer 1

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.