[英]How do I show/hide a div on field validation with parsley.js
因此,我想了解上下文,這是來自parsley.js文檔的示例。
<form id="demo-form" data-parsley-validate>
<div class="first">
<label for="firstname">Firstname:</label>
<input type="text" name="firstname" data-parsley-range="[4, 20]" data-parsley-group="block1" />
<label for="lastname">Lastname:</label>
<input type="text" name="lastname" data-parsley-range="[4, 20]" data-parsley-group="block1" />
</div>
<hr></hr>
<div class="second">
<label for="fullname">Fullname:</label>
<input type="text" name="fullname" data-parsley-range="[8, 40]" data-parsley-group="block2" />
</div>
<div class="invalid-form-error-message"></div>
<input type="submit" class="btn btn-default validate" />
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#demo-form').parsley().subscribe('parsley:form:validate', function (formInstance) {
// if one of these blocks is not failing do not prevent submission
// we use here group validation with option force (validate even non required fields)
if (formInstance.isValid('block1', true) || formInstance.isValid('block2', true)) {
$('.invalid-form-error-message').html('');
return;
}
// else stop form submission
formInstance.submitEvent.preventDefault();
// and display a gentle message
$('.invalid-form-error-message')
.html("You must correctly fill the fields of at least one of these two blocks!")
.addClass("filled");
return;
});
});
</script>
假設我有一個名為“ checkmark”的隱藏div。 驗證名字字段后如何顯示該div?
我還應該澄清一下,我已經閱讀了文檔,但是仍然不明白如何完成我在這里試圖做的事情,因此,除非您在自己的文檔中使用它,否則發布指向文檔的鏈接並不會真正有幫助。回答。
您應該使用Parsley的Events 。 由於要基於字段驗證顯示或隱藏某些內容,因此應使用parsley:field:success
和parsley:field:error
。
工作示例( 使用jsfiddle ):
<form id="demo-form" data-parsley-validate>
<div class="first">
<label for="firstname">Firstname:</label>
<input type="text" name="firstname" data-parsley-range="[4, 20]" data-parsley-group="block1" required />
<div class="hidden" id="checkmark">This message will be shown when the firstname is not valid </div>
<label for="lastname">Lastname:</label>
<input type="text" name="lastname" data-parsley-range="[4, 20]" data-parsley-group="block1" />
</div>
<hr></hr>
<div class="second">
<label for="fullname">Fullname:</label>
<input type="text" name="fullname" data-parsley-range="[8, 40]" data-parsley-group="block2" />
</div>
<div class="invalid-form-error-message"></div>
<input type="submit" class="btn btn-default validate" />
</form>
<script>
$(document).ready(function () {
$('#demo-form').parsley().subscribe('parsley:form:validate', function (formInstance) {
// if one of these blocks is not failing do not prevent submission
// we use here group validation with option force (validate even non required fields)
if (formInstance.isValid('block1', true) || formInstance.isValid('block2', true)) {
$('.invalid-form-error-message').html('');
return;
}
// else stop form submission
formInstance.submitEvent.preventDefault();
// and display a gentle message
$('.invalid-form-error-message')
.html("You must correctly fill the fields of at least one of these two blocks!")
.addClass("filled");
return;
});
$.listen('parsley:field:error', function(ParsleyField) {
if(ParsleyField.$element.attr('name') === 'firstname') {
$("div#checkmark").addClass('show').removeClass('hidden');
}
});
$.listen('parsley:field:success', function(ParsleyField) {
if(ParsleyField.$element.attr('name') === 'firstname') {
$("div#checkmark").addClass('hidden').removeClass('show');
}
});
});
</script>
這就是我所做的:
firstname
字段后添加帶有ìd=checkmark
的div(具有隱藏類,因為您使用的是Bootstrap)。 添加了以下JavaScript代碼塊:
$.listen('parsley:field:error', function(ParsleyField) { if(ParsleyField.$element.attr('name') === 'firstname') { $("div#checkmark").addClass('show').removeClass('hidden'); } }); $.listen('parsley:field:success', function(ParsleyField) { if(ParsleyField.$element.attr('name') === 'firstname') { $("div#checkmark").addClass('hidden').removeClass('show'); } });
此代碼將偵聽Parsley驗證的每個輸入的驗證。 這意味着當字段lastname
失敗時,將執行$.listen('parsley:field:error', function(ParsleyField) {
。這就是為什么我使用if
檢查attr名稱是否為firstname
。
然后根據驗證結果顯示或隱藏div。
required
,因此當您單擊按鈕時將顯示該消息。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.