I have not used ajax much before, so opted for the jQuery Form plugin. My aim is to have the form submitted by the plugin, use my validation to check the form fields are filled out correctly, if so submit the form.
All of the above works, except validation. When I click 'submit' the validation shows briefly then the box fades out as I have set in the success call in the ajax form script.
var options = {
beforeSubmit: validation,
success: function() {
var url = '/includes/embed-topbar-login-account';
$('#account').load(url, function() {
$('#account-options').fadeOut('slow');
});
}
};
$('#login').ajaxForm(options);
function validation() {
var prompt = '<div class="required-prompt"><small>This field is required.</small></div>';
var promptEmail = '<div class="required-prompt"><small>Invalid email address.</small></div>';
var required = true;
$('.required-prompt', this).remove();
$('.required', this).each(function() {
if( !$(this).val() ) {
$(this).after(prompt);
required = false;
} else {
$('.required-prompt', this).remove();
}
});
return required;
}
Can anyone tell me if there are any extra steps required to ensure the submission is halted if the validation returns 'false' (which it currently does).