I want to validate a form with parsley.js, then submit via jQuery.post
, which requires preventing the default form submission, but it's not working as expected.
The docs for form:submit
say:
Triggered when after a form validation succeeds and before the form is actually submitted. Return
false
to interrupt submission.
However, I can't get that to work... the following code updates the #alert
element, but then submits the form via the default browser level request. The $.post
call doesn't seem to be performed.. it's never received by the server anyway.
$('.contact-form form').parsley().on('form:submit', function() {
$('#alert')
.text('Sending...')
$.post({
url: '/contact',
data: form.serialize(),
success: function() {
$('#alert')
.text('Message successfully sent.')
},
error: function() {
$('#alert')
.removeClass('alert-success')
.addClass('alert-danger')
.text([
'Sorry, a server error has occurred. ',
'Your message was not sent.'
].join())
}
})
return false
})
The following works as expected, validation is performed but the form is not submitted
$('.contact-form form').parsley().on('form:submit', function() {
return false
}
I've tried things like this to no avail:
$('.contact-form form').parsley().on('form:submit', function(formInstance) {
formInstance.submitEvent.preventDefault()
}
So I'm stumped...
This issue is different to Preventing form submission after validation by parsley.js which relates to binding jQuery's submit
method to an input
element instead of form
.