使用 jquery.inputmask 插件进行 parsley.js 验证

Posted 2023-05-09

【中文标题】使用 jquery.inputmask 插件进行 parsley.js 验证

【英文标题】：parsley.js validation with jquery.inputmask plugin

【发布时间】：2016-10-12 06:16:50

【问题描述】：

被一种问题困住了。无法使用 parsleyjs 和 jquery.inputmask 正确验证表单字段

我有几个带有输入掩码的字段，我想要的只是在完全填写掩码时对其进行验证，而且我还有一组字段，在填写每组字段时都应该对其进行验证。 而且您可以注意电话字段完全符合我的需要（只有当所有数字都在掩码内时错误才会消失）

不确定，但我认为对于单个字段，最简单的决定是在字段中添加 minlength，但它不起作用，不知道为什么。 对于字段组不知道如何处理它。 我把代码放在下面，还有一个 jsfiddle 的链接。

这里有一个 jsfiddle 来演示代码https://jsfiddle.net/su3f74cc/32/

html：

<form action="" class="form form-style1 create-account">
    <fieldset class="form__step">
        <p class="form__wrap">
            <label for="">Phone</label>
            <input type="text" class="form__input" data-type="phone" data-parsley-pattern="^[\d\+\-\.\(\)\/\s]*$" placeholder="" required="">
        </p>
        <p class="form__wrap">
            <label for="">Passport ID</label>
            <input type="text" class="form__input" data-parsley-pattern="^\7$" data-type="passport" data-parsley-minlength="9" placeholder="" required="">
        </p>
        <p class="form__wrap row">
            <span class="col-sm-4 col-xs-8 col-xs-push-0">
                      <label for="">Date from</label>
                      <span class="date-custom">
                        <input type="text" class="form__input day" data-type="month" minlength="1" maxlength="2" placeholder="" data-parsley-type="digits" data-parsley-range="[1, 31]" required="">

                        <input type="text" class="form__input month" data-parsley-type="digits" data-type="month" data-parsley-range="[1, 12]" minlength="1" maxlength="2" placeholder="" required="">

                        <input type="text" class="form__input year" data-type="year" minlength="4" maxlength="4" placeholder="" data-parsley-type="digits" required="">
                      </span>
            </span>
            <span class="col-sm-4 col-sm-push-1 col-xs-8 col-xs-push-0">
                      <label for="">Date to</label>
                      <span class="date-custom">
                        <input type="text" class="form__input day" data-type="month" minlength="1" maxlength="2" data-parsley-range="[1, 31]" placeholder="" data-parsley-type="digits" required="">
                        <input type="text" class="form__input month" data-type="month" maxlength="10" placeholder="" data-parsley-range="[1, 12]" data-parsley-type="digits" required="">
                        <input type="text" class="form__input year" data-type="year" minlength="1" data-parsley-type="digits" maxlength="4" placeholder="" required="">
                      </span>
            </span>
        </p>
        <p class="form__wrap">
            <label for="">ID</label>
            <input type="numbers" class="form__input" placeholder="" data-type="ident" required="">
        </p>
    </fieldset>

    <div class="form__navigation">
        <p class="form-error-text hide">Ошибка при заполнении полей</p>
        <p class="text-center">
            <input type="submit" value="Submit" class="btn btn-xlg btn-flat btn-color1">
        </p>
    </div>
</form>

CSS：

.form__step 
  display: block;
  width: 100%;

.form-error label 
  color: red;

.form-error-text span 
  display: inline-block;
  color: red;
  padding: 0 10px;

JS：

(function($, window) 
    'use strict';

$('input[data-type="phone"]').inputmask("mask": "[phone]");
$('input[data-type="numbers"]').inputmask("914");
$('input[data-type="year"]').inputmask("94");
$('input[data-type="month"]').inputmask("92");
$('input[data-type="passport"]').inputmask("aa97");
$('input[data-type="ident"]').inputmask("mask":"97 a 93 aa 9");

var $navigation = $('.form .form__navigation'),
    $form = $('.create-account'),
    $sections = $('.form .form__step'),
    $formErrorText = $('.form .form-error-text'),
    listOfErrorLabels = [];
  window.Parsley.on('field:error', fieldInstance => 
    let arrErrorMsg = ParsleyUI.getErrorsMessages(fieldInstance);
    let errorMsg = arrErrorMsg.join(';');
    let fieldName = fieldInstance.$element.parents('.form__wrap').find('label').text();
    listOfErrorLabels.push(fieldName);
    listOfErrorLabels = _.union(listOfErrorLabels);
  );

  $navigation.on('click', 'input[type="submit"]', e => 
    e.preventDefault();
    listOfErrorLabels.length = 0;

    if ($form.parsley(
        successClass: 'form-success',
      errorClass: 'form-error',
      classHandler: function (el) 
        return el.$element.parents('.form__wrap');
      ,
      errorsWrapper: '',
      errorsContainer: function(parsleyField) 
    ).validate(group: 'block-0')) 
            // do something 
    

    // check if there are any errors 
    // if yes then show a error text with list of field that are missed
    if (listOfErrorLabels.length > 0) 
        let updatedList = listOfErrorLabels.reduce((template, text, index) => 
            return template = `$template &nbsp;<span>$text</span>&nbsp;`;
        , '');
        $formErrorText.addClass('show').html(`Errors $updatedList`);
     else 
        $formErrorText.removeClass('show');
    
  );

  $sections.each((index, section) => 
    $(section).find(':input').attr('data-parsley-group', 'block-' + index);
  );

)(jQuery, window);

这里有一个 jsfiddle 来演示代码 https://jsfiddle.net/su3f74cc/32/

【参考方案1】：

This is a known issue of maskedinput.

我建议切换到inputmask，因为 jquery.input 面具似乎不再维护；我为解决该问题所做的 PR 尚未合并。

一个对你有用的快速破解：

$(document).on('keypress', function(evt) 
  if(evt.isDefaultPrevented()) 
    // Assume that's because of maskedInput
    // See https://github.com/guillaumepotier/Parsley.js/issues/1076
    $(evt.target).trigger('input');
  
);