7

検証プラグインを使用しています。ラジオの値が「REGULAR」以外の場合、同じフォームの特定のフィールドを検証したいのですが、

<form id="registerform">
<input type="radio" name="role" value="REGULAR" checked="checked" id="role">Regular<br />
<input type="radio" name="role" value="AGENT" id="role">Agent<br />
<input type="radio" name="role" value="ORGANIZATION" id="role">Organization<br />

<input type="text" name="phone"  id="phone"><br/>
<input type="text" name="password" id="password"><br/>

<input type="text" name="work_area" id="work_area" value=""><br/>
<input type="text" name="work_phone" id="work_phone" value=""><br/>

<input type="text" name="org_name" id="org_name"><br/>
<input type="text" name="org_phone" id="org_phone"><br/>
</form>

role == "REGULAR"の場合、電話、パスワードを検証します
role == "AGENT"の場合、phone、password、work_area、work_phone
を検証します role == "ORGANIZATION"の場合、電話、パスワード、org_name、org_phone
を検証します これをエレガントに実現するには？
私はそれを異なる形に分割したくありません！

私の誤ったコード：

$(document).ready(function() {
var rule_options = 
{
    "phone": "required"
    ,"password": "required"
};

var role = $("#registerform").find("input[name=role]:checked").val();
if(role ==  "AGENT") {
    $.extend(true, rule_options, 
        {
            "work_area": "required"
            ,"work_phone": "required"
        }
    );
}

if(role ==  "ORGANIZATION") {
    $.extend(true, rule_options, 
        {
            "org_area": "required"
            ,"org_phone": "required"
        }
    );
}
jform.validate({
            errorClass : "err_label",
            rules: rule_options,
            ignore: "",

上記のコードは、document.readyの後に1回だけ実行されるため、機能しません。
私は何か、いくつかの構文が欠けているに違いありません..〜アイデア？

4

5 に答える 5

10

jquery 検証ルール
上記のリンクから本当に必要なものを取得しました。ここで実際に解決する必要があるのは、jQuery バリデータ プラグインを各入力の無線値に基づいて動的に動作させる方法です。jQuery.change() メソッドも使用しません。

function getRole() {
    return $("#registerform").find("input[name=role]:checked").val();
}

$(document).ready(function() {
    var jform = $("#registerform");
    jform.validate({
            errorClass : "err_label",
            rules: 
                "phone": "required"
                ,"password": "required"
                ,"work_area": {
                    required: function(element) {
                        return (getRole() == 'AGENT');
                    }
                }
                ,"work_phone": {
                    required: function(element) {
                        return (getRole() == 'AGENT');
                    }
                }
                ,"org_name": {
                    required: function(element) {
                        return (getRole() == 'ORGANIZATION');
                    }
                }
                ,"org_phone": {
                    required: function(element) {
                        return (getRole() == 'ORGANIZATION');
                    }
                }

他のアイデアがあれば、私に知らせてください。

于 2013-02-11T14:36:42.643 に答える
0

無視オプションを使用します。開発ツールにアクセスできず、コンピュータからjsfiddleが機能しないため、構文エラーが発生した場合は申し訳ありません。

編集：私はすべてのフィールドが必須であると想定しています。

$("form").validate({ignore: ".ignore"});

var role = {
    "REGULAR": ["work_area", "work_phone", "org_name", "org_phone"],
    "AGENT": ["org_name", "org_phone"],
    "ORGANIZATION": ["org_name", "org_phone"]
};

$("input[name=role]").click(function () {
    //reset ignore
    $("#work_area,#work_phone,#org_name,#org_phone").removeClass("ignore");

    for (var i in role[$(this).val()])
    {
        $(i).addClass("ignore");
    }
});
于 2013-02-11T10:00:06.027 に答える
-1 
$("input[@name='role']").change(function(){
    // Rest of your code here.
});

onload イベントを使用する代わりに、関数をラジオボタンにバインドします。

于 2013-02-11T08:27:30.170 に答える
-1

ユーザーがフォームをクリックするかキーを押すたびに、検証ルールを更新できます。

function updateRules() {
  // Your code here
}

$('#registerform').click(function() {
  updateRules();
});

$('#registerform').keyUp(function() {
  updateRules();
});
于 2013-02-11T08:27:42.727 に答える
-1

問題は、あなたがしていることです：

var role = $("#registerform").find("input[name=role]:checked").val();

そしてその作業ですが、これをイベントにアタッチする必要があるため（おそらく変更イベントが適切です）、ラジオボタンが何らかの形で変更されるたびに、検証設定が変更される必要があります。

$("input[@name='role']").change(function(){
    if( $(this).is(":checked") ){ // check if the radio is checked
        var val = $(this).val(); // retrieve the value
        if(role ==  "AGENT") {
           $.extend(true, rule_options, {
              "work_area": "required"
             ,"work_phone": "required"});
        }
        if(role ==  "ORGANIZATION") {
           $.extend(true, rule_options, {
              "org_area": "required"
             ,"org_phone": "required"});
        }
    }
});
于 2013-02-11T08:47:54.573 に答える