在parsley.js验证后阻止表单提交

Question

I have used parsley.js many times and have 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 refreshing but for some reason when I tried now it won't work. Can anyone figure out 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 binding the submit event to a input element. If you check the jquery $.submit() documentation , it states that:

The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to <form> elements . Forms can be submitted either by clicking an 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 and this is why alert will never be displayed (in fact, that code is never executed).

I would also change a few things:

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

So, your code will 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 don't need to apply javascript to form to stop submit until all validation run. But if you applying javascript return false when parsely() not valid. And just make sure you have include 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 details parsely documentation check Form with examples and events