CODEWITHSUNDEEP
javascriptformsvalidationtwitter-bootstrapparsley.js
Romain Achard
Romain Achard

Reputation: 83

Using parsley on a wizard form (3 steps)

I'm working on a form based on a Twitter Bootstrap tab.

I use Parsley for validation form.

I would like to validate only the fields on my first tab (step 1) before clicking on the next button that go to step 2.

Is there a way to do that? Cheers.

Upvotes: 3

Views: 4757

Answers (6)

Marc-André Lafortune
Marc-André Lafortune

Reputation: 79612

API has changed a lot in Parsley 2.0.

There's an official example on a good way to achieve this.

Upvotes: 0

giraff
giraff

Reputation: 4711

Here is the code by @nmoliveira, updated for Parsley 2.1+:


$('form').parsley().on('field:validate', function() {
    var elem = this.$element;

    // If the field is not visible, do not apply Parsley validation!
    if ( !$( elem ).is( ':visible' ) ) {
        this.constraints = [];
    }
});

Upvotes: 0

user1533401
user1533401

Reputation: 191

If your entire form is loaded in the DOM, and you are able to use the parsely API, you can run multiple validations, one for each step of your wizard. To do that you must use the parsley-bind attribute. Something like: 

<form action="#">

    <!-- wizard step 1 --> 
    <div class='step1' parsley-validate parsley-bind>
       <input type="text" ..... />
       <input type="text" ..... />
    </div>

    <!-- wizard step 2 --> 
    <div class='step2' parsley-validate parsley-bind>
       <input type="text" ..... />
       <input type="text" ..... />
    </div>

    <!-- wizard step 3 --> 
    <div class='step1' parsley-validate parsley-bind>
       <input type="text" ..... />
       <input type="text" ..... />
    </div>

</form>

Upvotes: 2

nmoliveira
nmoliveira

Reputation: 1769

You can also add an event listener to parsley that checks if the element is visible or not. If is not visible it will not apply the validation. This way your controls on the invisible tabs are not validated.

$( '#form' ).parsley( 'addListener', {
    onFieldValidate: function ( elem ) {

        // if field is not visible, do not apply Parsley validation!
        if ( !$( elem ).is( ':visible' ) ) {
            return true;
        }

        return false;
    }
} );

Update: Instead of checking for the visibility of the element, you can use whatever condition you may need. For example checking if the element has a specific class.

Example suggested by davidtheclark:

$( elem ).closest('.form-page').hasClass('is-hidden')

Upvotes: 9

guillaumepotier
guillaumepotier

Reputation: 7448

If your fields on second tab are hidden, you could just add ':hidden' property to the 'excludedFields' option. That way, each $(yourform).parsley('validate') would only validate visible fields (ie step1 then step2)

If you do so, remember that you will have to manually bind parsley to your form and not with the data-validate="parsley"

Upvotes: 3

E-Madd
E-Madd

Reputation: 4582

<script>
function onValidate(){

    if(!$('##formID').parsley( 'isValid' )){

        $('.parsley-error').closest('.tab-pane').show();
        return false;

    }

    return true;

 }
</script>    
<form data-validate="parsley" onSubmit="return onValidate()">

Upvotes: 1

Related Questions