Prevent submitting a form after checking parsley.js

Question

I used parsley.js many times and literally copied the code from my last use of parsley.

However, every time I submit the form, the page refreshes. preventDefault seems to work on my other pages and stops the page from updating, but for some reason, when I tried it now, this will not work. Can anyone understand why not?

 <script> $(function(){ $("#register_signup").submit(function(e){ e.preventDefault(); var form = $(this); if ($('#rform').parsley( 'isValid' )){ alert('valid'); } }); }); </script> <form id='rform' name='rform' data-parsley-validate> <input id='reg_password' class='register_input' type='text' autocomplete="off" data-parsley-trigger="change" placeholder='Password' required> <input id='reg_cpassword' class='register_input' type='text' name="reg_cpassword" placeholder='Confirm password' data-parsley-equalto="#reg_password" required> <input id='register_signup' type="submit" onClick="javascript:$('#rform').parsley( 'validate' );" value='Sign Up' /> </form> 

Answer 1

You are attaching a submit event to an input element. If you check the jquery $ .submit () documentation , it says that:

A submit event is dispatched to an element when a user tries to submit a form. It can only be attached to <form> elements . Forms can be represented either by pressing explicit <input type="submit"> , <input type="image"> , or <button type="submit"> , or by pressing Enter when certain form elements have focus.

This is your main problem, so alert will never be displayed (in fact, this code never executes).

I would also change a few things:

• $('#rform').parsley( 'validate' ) must be $('#rform').parsley().validate() if you are using Parsley 2. *
• $('#rform').parsley( 'isValid' ) must be $('#rform').parsley().isValid() .
• Use $.on() instead of $.submit() .
• Remove onClick from the register_signup element. Since you are already using javascript, I would do it directly in javascript code instead of onclick. This is a more personal preference.

So your code would be something like this:

 <form id='rform' name='rform'> <input id='reg_password' class='register_input' type='text' autocomplete="off" data-parsley-trigger="change" placeholder='Password' required> <input id='reg_cpassword' class='register_input' type='text' name="reg_cpassword" placeholder='Confirm password' data-parsley-equalto="#reg_password" required> <input id='register_signup' type="submit" value='Sign Up' /> </form> <script> $(document).ready(function() { $("#rform").on('submit', function(e){ e.preventDefault(); var form = $(this); form.parsley().validate(); if (form.parsley().isValid()){ alert('valid'); } }); }); </script> 

Answer 2

When you apply data-parsley-validate to your form, you do not need to use javascript to create it to stop submitting until all validation has been completed. But if you use javascript return false when parsely () is invalid. And just make sure you have the parsley.js code file.

Answer 3

if you are using parsely 2 you can try this

 $(function () { //parsely event to validate form -> form:valiate $('#rform').parsley().on('form:validate', function (formInstance) { //whenValid return promise if success enter then function if failed enter catch var ok = formInstance.whenValid() //on success validation .then(function(){ alert('v'); formInstance.reset(); }) //on failure validation .catch(function(){ formInstance.destroy(); }); $('.invalid-form-error-message') .html(ok ? '' : 'You must correctly fill *at least one of these two blocks!') .toggleClass('filled', !ok); // console.log(formInstance); if (!ok) formInstance.validationResult = false; console.log(formInstance); }); //parsely event to submit form -> form:submit $('#rform').parsley().on('form:submit', function (formInstance) { // if you want to prevent submit in any condition after validation success -> return it false return false; }); //default submit still implemented but replaced with event form:submit $('#rform').submit(function () { alert('dd'); }); }); 

for more information, analyze the documentation; check the form with examples and events