带有输入掩码的 jQuery 验证答案

【问题标题】：jQuery validation with input mask带有输入掩码的 jQuery 验证
【发布时间】：2015-09-15 08:35:19
【问题描述】：

有这个问题，带有指定掩码（作为占位符）的表单输入未被 jQuery 验证验证为空。

我用：

https://github.com/RobinHerbots/jquery.inputmask
https://github.com/1000hz/bootstrap-validator （在这种情况下使用 jQuery 原生验证）

一些奇怪的行为：

具有required 属性的输入被（通过 jQuery）验证为非空，因此有效，但另一方面，输入不被视为“非空”并且不检查其他验证规则（这是通过 validator.js )
当我在输入字段中写入内容然后删除它时，我收到 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();      
});

【问题讨论】：

标签： javascript jquery twitter-bootstrap validation masking

【解决方案1】：

我通过激活 clearIncomplete 成功地使用了 RobinHerbots 的 Inputmask (3.3.11) 和 jQuery Validate。见Input mask documentation dedicated section：

在模糊中清除不完整的输入

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

个人而言，如果可能，我更喜欢通过 HTML 数据属性来设置：

data-inputmask-clearincomplete="true"

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

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

// 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();

【讨论】：

【解决方案2】：

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

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

但仍然远非完美：(

解释：

其他屏蔽库，不提这两个奇怪的行为，所以可以验证字段。

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

【讨论】：

我很高兴您发布了有关此问题的帖子，因为我遇到了完全相同的问题。使用 jquery.maskedinput 是否解决了您的问题？我也在使用 jquery.maskedinput，但我仍然在标记为必填的字段上收到错误消息。
它对我有用。获取错误消息正是这里的目标。
我认为我们可能有不同版本的库，因为无论条目（正确或错误）如何，掩码总是抛出错误。
没关系，我算错了 max 属性，没有考虑掩码添加的破折号。它有效

【解决方案3】：

将这两个库组合在一起时，我遇到了同样的问题。

其实这里也有类似的票：https://github.com/RobinHerbots/Inputmask/issues/1034

这里是RobinHerbots提供的解决方案：

$("#inputPhone").inputmask("999.999.9999", {showMaskOnFocus: false, showMaskOnHover: false});

当掩码焦点/悬停在那里时，验证器假定它不为空。只需将焦点和蒙版悬停关闭即可解决问题。

【讨论】：

【解决方案4】：

我解决了这个问题：

phone_number: {
            presence: {message: '^ Prosimy o podanie numeru telefonu'},
            format: {
                pattern: '(\\(?(\\+|00)?48\\)?)?[ -]?\\d{3}[ -]?\\d{3}[ -]?\\d{3}',
                message: function (value, attribute, validatorOptions, attributes, globalOptions) {
                    return validate.format("^ Nieprawidłowa wartość w polu Telefon");
                }
            },
            length: {
            minimum: 15,
                message: '^ Prosimy o podanie numeru telefonu'
            },
        },

【讨论】：