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>

Luís Cruz · Accepted Answer · 2016-10-11T09:40:54.220

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:

$('#rform').parsley( 'validate' ) should be $('#rform').parsley().validate(), assuming you are using Parsley 2.*
$('#rform').parsley( 'isValid' ) should be $('#rform').parsley().isValid().
Use $.on() instead of $.submit().
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>

since you are using javascript to validate the form, the 'data-parsley-validate' attribute should be removed from the form — Benny, Oct 11 '16 at 07:25
Used your answered code for preventing from submitting but not working. any suggestion? — always-a-learner, May 20 '17 at 05:02
@ankitsuthar, you should create a fiddle and post a new question. — Luís Cruz, May 20 '17 at 11:56
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. — Jason, Aug 06 '17 at 00:32
@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. — Luís Cruz, Aug 06 '17 at 01:48

score 1 · Answer 2 · answered Sep 09 '19 at 23:26

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

score 0 · Answer 3 · answered Sep 21 '14 at 11:47

0

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.

answered Sep 21 '14 at 11:47

Safoor Safdar

5,516
1
28
32

but then why is it refreshing the page? – morty Sep 21 '14 at 12:05
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. – Safoor Safdar Sep 21 '14 at 12:22
You can also stop it to submit – Safoor Safdar Sep 21 '14 at 12:24

Preventing form submission after validation by parsley.js

3 Answers3

Linked