0

私はjQuery Validation Pluginを使用しており、次のように独自のメソッドを追加しています:

jQuery.validator.addMethod("num", function(num) {
    if(isNaN(num))
        return false;

    return true;
}, "Please enter a valid number");

ただし、requiredクラスをフォーム要素に追加しなくても、ユーザーが何も入力しないと、この検証メソッドが呼び出され、false と評価されます。requiredしかし、要素にクラスがない場合、ユーザーが何かを入力した場合にのみ呼び出されるという動作にしたいと思います。とにかくこれを行うことはありますか？ありがとう！

アップデート

したがって、上に投稿した実際のコードは、問題を示すための簡単な例であることが意図されていましたが、現在、問題を引き起こしている特定の例を掲載しています。jsfiddle リンクは次のとおりです。

http://jsfiddle.net/SVwmH/2/

HTML

<form method="post">
    <li>
        <label for="2">Mileage</label>
        <input type="text" name="2" id="attr_2" class="non_neg_int"
        value="" />
    </li>
    <li>
        <label for="3">VIN (Vehicle Identification Number)</label>
        <input type="text" name="3"
        id="attr_3" class="vin" maxlength="17" value="" />
    </li>
    <li>
        <input type="submit" />
    </li>
</form>

JS

$(document).ready(function () {
    var validator = $("form").validate({
        onkeyup: false,
        onblur: true,
        ignore: "",
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });
});

jQuery.validator.addMethod("vin", function (vin) {
    if (!(/^[A-HJ-NP-Z0-9]{17}$/.test(vin))) return false;
    return true;
}, "Must be a valid VIN");

jQuery.validator.addMethod("non_neg_int", function (non_neg_int) {
    if (isNaN(non_neg_int) || non_neg_int == null || non_neg_int == "" || non_neg_int < 0 || !is_int(non_neg_int)) return false;

    return true;
}, "Must be a nonnegative integer");

function is_int(value) {
    if ((parseFloat(value) == parseInt(value)) && !isNaN(value)) {
        return true;
    } else {
        return false;
    }
}
4

1 に答える 1

5

引用OP：

「ただし、requiredクラスをフォーム要素に追加しなくても、ユーザーが何も入力しないと、この検証メソッドが呼び出され、false と評価されます。」

あなたが説明したように、私は問題を再現できません。

投稿されたように、空のフィールドはカスタム メソッドを呼び出さず、フィールドも必須ではありません。

デモ: http://jsfiddle.net/mJvA8/

HTML :

<form id="myform">
    <input type="text" name="field1" />
    <input type="submit" />
</form>

jQuery :

$(document).ready(function () {

    jQuery.validator.addMethod("num", function (num) {
        if (isNaN(num)) return false;
        return true;
    }, "Please enter a valid number");

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                num: true
            }
        }
    });

});

編集されたOPに基づく編集:

コードに次の問題が見つかりました。これらのアイテムの一部だけがコードを壊していました。残りは良い練習の問題です。これらを一度に 1 つずつテストして、自分の目で確かめることができます。

1) というオプションはありません onblur。と呼ばれるものがあり、デフォルトonfocusoutで有効になっています。この中に入ると壊れます。渡して無効にするか、カスタム関数を渡してオーバーライドすることしかできません。デフォルトのオプションを有効にしておくには、完全に省略してください。truefalseonfocusout

2)すべての入力要素には有効な が必要nameで、name="2"無効です。数字で始めることはできません。

3)非表示のフィールドを検証する場合は、ignoreオプションを に設定し、 に設定する必要がありignore: []ますignore: ""。それ以外の場合は、このオプションを省略します。隠しフィールドはデフォルトで無視されます。参照: https://stackoverflow.com/a/8565769/594235

4)value=""各要素を指定する意味がわかりません。value使用しない場合は、単に属性を省略してください。

5) このすべてを書き出す代わりに...

 if (test) return false;
 return true;

...もっと簡単に1行書くこと ができますreturn !(test); :!testreturn false

6) ドキュメントvalueに従って、、、elementおよびオプションのみをparams次のように customMethod 関数に渡します .addMethod("myrule", function(value, element, params) { ... }, "message")。

この構文により、混乱が軽減されます。"non_neg_int"また、単語の代わりにルールの名前を使用すると、カスタム メソッド"value"が完全に壊れてしまいます。non_neg_int

これらのルールを「必須」にしたくない場合は、ルール内のロジックを修正する必要があります。たとえば、non_neg_intメソッドは空または null フィールドを探しているため、フィールドが空の場合は当然エラー メッセージが表示されます。

this.optional(element)2 つのルールに、ルールをオプションにする単純なルールを追加しました。つまり、空白のままにすると、ルールは何もしません。

return this.optional(element) || !(test);

以下に動作するデモがあり、必要に応じて微調整できます。

新しいデモ: http://jsfiddle.net/gVVa8/

于 2013-03-15T06:13:46.000 に答える