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).
you shsould specify beforeSubmit
$('#login').ajaxForm({
success: function() {
var url = '/includes/embed-topbar-login-account';
$('#account').load(url, function() {
$('#account-options').fadeOut('slow');
});
},
beforeSubmit: function(arr, $form, options) {
// The array of form data takes the following form:
// [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
// return false to cancel submit
return validate(); //Assuming validate is your function doing validation.
}
});