lundi 2 février 2015

Validating a multi-page form with parsley.js


I am working with the multi-page form found here and trying to validate the fieldsets using parsley.js. I have followed their steps on their examples page for a multi-page form but I run into one of two problems:


1) It won't prompt for non-filled in fields until I hit submit and then will show the errors when I hit previous or 2) When I click on Next I get an error in the console that says it's an undefined function on "next_fs.show();"


Here is the form code followed below by a link to all my current code in a fiddle.



<!-- multistep form -->
<form id="msform" data-parsley-validate>
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Account Setup</li>
<li>Social Profiles</li>
<li>Personal Details</li>
</ul>
<!-- fieldsets -->
<fieldset class="first block1">
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" name="email" placeholder="Email" required data-parsley-group="block1" />
<input type="password" name="pass" placeholder="Password" required data-parsley-group="block1" />
<input type="password" name="cpass" placeholder="Confirm Password" required data-parsley-group="block1" />
<input type="button" name="next" class="next action-button" value="Next" data-current-block="1" data-next-block="2" />
</fieldset>
<fieldset class="second block2">
<h2 class="fs-title">Social Profiles</h2>
<h3 class="fs-subtitle">Your presence on the social network</h3>
...
<input type="button" name="previous" class="previous action-button" value="Previous" data-current-block="2" data-next-block="1" />
<input type="button" name="next" class="next action-button" value="Next" data-current-block="2" data-next-block="3" />
</fieldset>
<fieldset class="third block3">
<h2 class="fs-title">Personal Details</h2>
<h3 class="fs-subtitle">We will never sell it</h3>
...
<input type="button" name="previous" class="previous action-button" value="Previous" data-current-block="3" data-next-block="2" />
<button type="submit" name="donateNow" id="donateNow" class="submit action-button" value="Submit" >Submit</button>
</fieldset>
</form>


Here is a fiddle with my current code with the tweaks to work with parsley.js. (I'm currently running into problem #2)


I cannot for the life of me figure out how to get the validation to work on the page change. Thanks for any help that can be provided!





Aucun commentaire:

Enregistrer un commentaire