web-dev-qa-db-ja.com

定型入力によるjQuery検証

マスクが（プレースホルダーとして）割り当てられたフォーム入力が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();      
});
javascriptjquerytwitter-bootstrapvalidationmasking
10
D. Cichowski

それは正確な解決策ではありませんが...

入力マスクを同等のものに変更すると、問題が解決します。

しかし、まだ完璧には程遠いです：（

説明：

他のマスキングライブラリでは、これら2つの奇妙な動作について言及していないため、フィールドを検証できます。

私は使用しました： https://github.com/digitalBush/jquery.maskedinput

2
D. Cichowski

clearIncompleteをアクティブ化することにより、jQuery ValidateでRobinHerbotsの入力マスク（3.3.11）を使用することができました。 定型入力ドキュメントの専用セクションを参照してください ：

ぼかしの不完全な入力をクリアする

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

個人的には、可能であれば、これをHTMLデータ属性で設定することをお勧めします。

data-inputmask-clearincomplete="true"

欠点は次のとおりです：フォーカスが失われると、部分的な入力が消去されますが、私はそれに耐えることができます。だから多分あなたも...

Edit：残りの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();
1
Antoine Robin

私はこの問題を次のように解決しました：

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'
            },
        },
0
user3089561

これら2つのライブラリーを組み合わせると、同じ問題が発生します。

実際にはここに同様のチケットがあります： https://github.com/RobinHerbots/Inputmask/issues/1034

RobinHerbotsが提供するソリューションは次のとおりです：

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

バリデーターは、マスクのフォーカス/ホバーが存在する場合、空ではないと想定します。マスクのフォーカスとホバーをオフにするだけで問題が解決します。

0
Terence