使用输入掩码进行jQuery验证

Question

具有指定掩码的输入(作为占位符)的此问题未通过jQuery验证验证为空.

我用:

• https://github.com/RobinHerbots/jquery.inputmask
• https://github.com/1000hz/bootstrap-validator (在这种情况下使用jQuery本机验证)

一些奇怪的行为:

1. 具有属性的输入required被验证(通过jQuery)为非空且因此有效,但另一方面输入不被视为"非空"并且未检查其他验证规则(这是通过validator.js)
2. 当我在输入字段中写入内容然后将其删除时,我收到required错误消息

任何人都可以给我一些提示吗？

编辑:相关代码:

HTML/PHP:

<form enctype="multipart/form-data" method="post" id="feedback">
    <div class="kontakt-form-row form-group">
        <div class="kontakt-form">
            <label for="phone" class="element">
                phone<span class="required">*</span>
            </label>
        </div>
        <div class="kontakt-form">
            <div class="element">
                <input id="phone" name="phone" ' . (isset($user['phone']) ? 'value="' . $user['phone'] . '"' : '') . ' type="text" maxlength="20" class="form-control" required="required" data-remote="/validator.php">
            </div>
        </div>
        <div class="help-block with-errors"></div>
    </div>
</form>

JS:

$(document).ready(function() {

    $('#phone').inputmask("+48 999 999 999");

    $('#feedback').validator();      
}); 

Answer 1

我设法通过激活clearIncomplete将 RobinHerbots 的 Inputmask (3.3.11) 与 jQuery Validate一起使用。请参阅输入掩码文档专用部分：

清除模糊上的不完整输入

$(document).ready(function(){
  $("#date").inputmask("99/99/9999",{ "clearIncomplete": true });
});

Personnaly，如果可能，我更喜欢通过 HTML 数据属性设置它：

data-inputmask-clearincomplete="true"

缺点是：失去焦点时部分输入会被删除，但我可以忍受。所以也许你也...

编辑：如果您需要将掩码验证添加到 jQuery 验证过程的其余部分，您可以通过执行以下操作来模拟 jQuery 验证错误：

// Get jQuery Validate validator currently attached
var validator = $form.data('validator');

// Get inputs violating masks
var $maskedInputList 
    = $(':input[data-inputmask-mask]:not([data-inputmask-mask=""])');
var $incompleteMaskedInputList 
    = $maskedInputList.filter(function() { 
        return !$(this).inputmask("isComplete"); 
    });
if ($incompleteMaskedInputList.length > 0)
{
    var errors = {};
    $incompleteMaskedInputList.each(function () {
        var $input = $(this);
        var inputName = $input.prop('name');
        errors[inputName] 
            = localize('IncompleteMaskedInput_Message');
    });

    // Display each mask violation error as jQuery Validate error
    validator.showErrors(errors);

    // Cancel submit if any such error
    isAllInputmaskValid = false;
}

// jQuery Validate validation
var isAllInputValid = validator.form();

// Cancel submit if any of the two validation process fails
if (!isAllInputValid ||
    !isAllInputmaskValid) {
    return;
}

// Form submit
$form.submit();

Answer 2

这不完全是解决方案，但是......

将输入掩码更改为等效值可以解决问题。

不过，离完美还很远:(

解释：

其他屏蔽库没有提到这两种奇怪的行为，因此可以验证字段。

我用过： https: //github.com/digitalBush/jquery.maskedinput