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.
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.
Share Improve this question edited Sep 12, 2013 at 22:36 Shadow Wizard 66.4k26 gold badges146 silver badges209 bronze badges asked Jun 18, 2013 at 22:37 Romain AchardRomain Achard 832 silver badges8 bronze badges6 Answers
Reset to default 9You 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')
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"
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>
<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()">
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 = [];
}
});
API has changed a lot in Parsley 2.0.
There's an official example on a good way to achieve this.