Preventing form submission after validation by 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>

Mistletoe

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 onClickfrom 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>

Wellturned

since you are using javascript to validate the form, the 'data-parsley-validate' attribute should be removed from the form – Tarahtaran

Used your answered code for preventing from submitting but not working. any suggestion? – Acrospire

@ankitsuthar, you should create a fiddle and post a new question. – Calan

Wouldn't you want to fire e.preventDefault() only if validation fails? That way if, validation is successful, then the form will submit as normal, or perhaps be caught and handled by a later event. – Aggappera

@Jason, yes, you're correct, you can have a else statement and move the e.preventDefault() to that else. I left the code as it is because it was based on the question and because I'm used to submit the forms with ajax and, in this case, e.preventDefault() should always be executed. – Calan

Thank you so much it worked for me on october 2023. – Terrijo

Answer 2

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

Palmerpalmerston

Answer 3

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.

Spite

but then why is it refreshing the page? – Mistletoe

its not refreshing, its just submitting your form. Becuase you need to set flag if form validatation complete return true to submit a form and if not return false to do mot submit form. – Spite

You can also stop it to submit <input id='register_signup' type="submit" onClick="return javascript:$('#rform').parsley( 'validate' );" value='Sign Up' /> – Spite