javascript - 如何使用 parsley.js 在字段验证中显示/隐藏 div

Question

所以我想为了上下文，这里是 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？

我还应该澄清，我已经阅读了文档，但仍然不明白如何完成我在这里尝试做的事情，因此发布文档的链接并没有真正的帮助，除非您使用在你的回答中。

Answer 1

您应该使用Parsley's Events 。由于您想要根据字段验证来显示或隐藏某些内容，因此应该使用parsley:field:success和parsley:field:error。

工作示例(with 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>

这就是我所做的:

1. 在 firstname 字段后添加了一个带有 ìd=checkmark 的 div(带有隐藏类，因为您使用的是 Bootstrap)。

2. 添加了此 JavaScript block :

   $.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。

3. 在字段中添加了 required，这样当您单击按钮时就会显示该消息。