[英]Validating a multi-page form with parsley.js
我正在使用這里找到的多頁表單,並嘗試使用parsley.js驗證字段集。 我在多頁表單的示例頁面上遵循了他們的步驟,但是遇到了以下兩個問題之一:
1)在我點擊提交之前,它不會提示您填寫字段,然后在我點擊上一個或第二個時顯示錯誤。2)當我單擊下一步時,在控制台中出現錯誤,指出“ next_fs.show();”
這是表單代碼,下面是一個小提琴中所有當前代碼的鏈接。
<!-- 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>
這是我當前代碼的小提琴,其中包含與parsley.js一起使用的調整。 (我目前遇到問題2)
我一輩子都無法弄清楚如何使驗證在頁面更改上起作用。 感謝您提供的任何幫助!
您的代碼有幾個問題。 關於您的第二個問題,這是由於以下原因造成的:
//this comes from the custom easing plugin
easing: 'easeInOutBack'
您將此作為animate
的options
對象的一部分。 根據您的評論,這來自自定義插件,您沒有將其包含在jsfiddle中。
如果注釋該行,它將按預期進行動畫處理( 請參閱更新的jsfiddle );
關於您的#1問題:
$("#msform").parsley()
或使用data-parsley-validate
屬性來綁定) .next
或.prev
,始終顯示下一個或上一個.prev
,而不驗證該字段集/塊。 required
屬性。 您應該看一下multisteps示例 ,尤其是javascript部分,我在這里包括了附加注釋:
// The form tag is <form id="demo-form" data-parsley-validate>, so
// parsley will automatically be bound to that form.
// see the docs http://parsleyjs.org/doc/index.html#psly-usage-form
<script type="text/javascript">
$(document).ready(function () {
// when you click on next
$('.next').on('click', function () {
// save current and previous blocks (these are your fieldsets)
var current = $(this).data('currentBlock'),
next = $(this).data('nextBlock');
// only validate going forward. If current group is invalid, do not go further
// .parsley().validate() returns validation result AND show errors
if (next > current)
// THIS IS THE IMPORTANT STEP. Validate the current block,
// If the current block is not validated, the next block
// won't be shown (note the return).
if (false === $('#demo-form').parsley().validate('block' + current))
return;
// validation was ok. We can go on next step.
$('.block' + current)
.removeClass('show')
.addClass('hidden');
$('.block' + next)
.removeClass('hidden')
.addClass('show');
});
});
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.