使用輸入掩碼進行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

這不完全是解決方案，但......

更改某些等效的輸入掩碼可以解決問題 。

盡管如此，仍然遠非完美:(

說明：

其他掩蔽庫，沒有提到這兩個奇怪的行為，因此可以驗證字段。

我用過： https ： //github.com/digitalBush/jquery.maskedinput

Answer 2

通過激活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 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();

Answer 3

將這兩個庫組合在一起時，我遇到了同樣的問題。

實際上這里有一張類似的票： https ： //github.com/RobinHerbots/Inputmask/issues/1034

以下是RobinHerbots提供的解決方案：

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

當掩碼焦點/懸停在那里時，驗證器假定它不是空的。 只需轉動焦點並將面罩懸停，就可以解決問題。

Answer 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'
            },
        },