0

次のような形式に従うフォーム要素がいくつかあります。

<input type="radio" name="test" value="A"> <input type="text" size="3" name="weightA" id="A"><br>
<input type="radio" name="test" value="B"> <input type="text" size="3" name="weightB" id="B"><br>

jQueryValidationプラグインを使用してクライアント側の検証を行っています。これらのフィールドでやりたいのは、選択したラジオボタンに対応するテキスト入力が100になるようにすることです。PHPを使用してサーバー側でこれを正常に実装しましたが、すぐにフィードバックを提供するためにJSメソッドを追加したいと思います。フォームが送信される前。range:数値範囲[1-100]内の2つのテキストフィールドへのユーザー入力を制限するjQueryルールをすでに含めました。

この作品を作るにはどうすればよいですか？それjQuery.validator.addMethodを行う方法でしょうか？

編集： Sparkyのコメントに応えて、私は以下のaddMethodを試みました：

$.validator.addMethod(
    "selectWt", function(value, element) {
        var selA = $('[name="test"]').val() === "A";
        var selB = $('[name="test"]').val() === "B";

        if (selA && ($("#A").val() !== "100")) {
            return false;
        } else if (selB && ($("#B").val() !== "100")) {
            return false;
        } else return true;
    }, "Selected option must equal 100."
);

これはの検証をトリガーするようです#Aが、ではありません #B。表示されるエラーメッセージは、で指定されたものmessage:ではなく、ルールで指定されたものaddMethodです。私には最小限のプログラミングのバックグラウンドがあることを覚えておいてください。

4

1 に答える 1

0

これを試して：

デモ：http： //jsfiddle.net/maqZe/

$.validator.addMethod("selectWt", function (value, element) {
    if ($(element).prev().is(':checked')) {
        return ($(element).val() === 100);
    } else {
        return true;
    }
}, "Selected option must equal 100.");

このルールは一般的に適用できます。要素の前に配置された無線要素がであるかどうかを確認するだけですchecked。trueその場合、テキスト要素の値が。の場合にのみ返されます100。

type=text記述方法では、要素が要素の直後にある場合にのみ機能しますtype=radio。HTMLの配置を変更する場合は、微調整する必要があります。

100値をパラメータとして渡すことで、より柔軟にすることもできます。

デモ：http：//jsfiddle.net/NFJUN/

$.validator.addMethod("selectWt", function (value, element, param) {
    if ($(element).prev().is(':checked')) {
        return ($(element).val() === param);
    } else {
        return true;
    }
}, "Selected option must equal {0}.");

..。

$('#myform').validate({ // initialize the plugin
    rules: {
        myfield: {
            selectWt: 100 // use a parameter instead of "true"
        },
    }
});
于 2013-03-21T05:21:42.130 に答える