web-dev-qa-db-ja.com

jQuery検証-2つのフィールド、1つの入力のみに必要

フォームで jQuery Validation Plugin を使用しています。フォームに「電話」フィールドと「モバイル番号」があります。フィールド。

ユーザーがそれらのいずれかを入力する必要があるように、どのように作成しますか？

jqueryjquery-validate
48
Probocop

これは、使用する必要があるもののように見えます dependency-callback

これにより、次のことが可能になります。

指定されたコールバックの結果に応じて、要素を必須にします。

次に、関数コールバックからの戻りに基づいてのみ必要となる2つの電話フィールドにrequired検証ルールを配置できます。したがって、モバイルフィールドが空白の場合にのみこのルールを要求するように電話フィールドにルールを設定し、モバイルフィールドの場合はその逆を行うことができます。

これはテストされていませんが、理論的には

rules: {
    telephone: {
        required: function(element) {
            return $("#mobile").is(':empty');
        }
    },
    mobile: {
        required: function(element) {
            return $("#telephone").is(':empty');
        }
    }
}

更新された回答の可能性については、コメント/その他の回答を必ず確認してください。

[〜＃〜] update [〜＃〜]

rules: {
     telephone: {
          required: '#mobile:blank'
     },
     mobile: {
          required: '#telephone:blank'
     }
}
64
Jeff Wilbert

これを行う正しい方法は、「require_from_group」メソッドを使用することだと思います。

http://jqueryvalidation.org/require_from_group-method/ で確認できます

例はまさにあなたが探しているものです：

<input class="left phone-group" id="mobile_phone" name="mobile_phone">
<input class="left phone-group" id="home_phone" name="home_phone">
<input class="left phone-group" id="work_phone" name="work_phone">

<script>
$( "#form" ).validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, ".phone-group"]
    },
    home_phone: {
      require_from_group: [1, ".phone-group"]
    },
    work_phone: {
      require_from_group: [1, ".phone-group"]
    }
  }
});
</script>

Additional-methods.jsを含めることが必須です

41
eveevans

同じ答えを探してここに来ました。上記の投稿は非常に役に立ちました。ありがとう。

このソリューションを拡張して、単に「空ではない」のではなく、他のフィールドが実際に有効かどうかを確認しました。これにより、モバイルフィールドから「必須」クラスを削除する前に、ユーザーが有効な電話番号を入力することが保証されます。逆も同様です。

Mobile: {
    required: function(element) {
    return (!$("#Phone").hasClass('valid'));
    }
},
Phone: {
    required: function(element) {
        return (!$("#Mobile").hasClass('valid'));
    }
}
27
Barbs

要件は、検証がCまたは（AおよびB）のいずれかである必要があることです。私のために働いたことは：

$.validator.addMethod("multipeFieldValidator", function(value) { 
    var returnVal = false; 
    if($("#Cfield").val() != '' || ($("#Afield").val() != '' && $("#Bfield").val() != '')) {
        returnVal = true;
    }
    return returnVal; 
}, 'Either C or A and B is required');


$('#Afield.form-control').change(function(){
    $(this).valid();
    $("#Bfield").valid();
    $("#Cfield").valid();

});

$('#Bfield.form-control').change(function(){
    $(this).valid();
    $("#Afield").valid();
    $("#Cfield").valid();
});

$('#Cfield.form-control').change(function(){
    $(this).valid();
    $("#Bfield").valid();
    $("#Afield").valid();
});


within rules I have 
Afield: "multipeFieldValidator",
Bfield: "multipeFieldValidator",
Cfield: "multipeFieldValidator"
2
Vik18
$(document).ready(function () {
    jQuery.validator.addMethod("mobile10d", function (value, element) {
        return this.optional(element) || /^[7-9]{1}[0-9]{9}$/.test(value);
    }, "Please enter a valid 10 digit phone number.");
    $("#form_id").validate({
        rules: {
            mobile: {
                required: "#telephone:blank",
                mobile10d: true
            },
            telephone: {
                required: "#mobile:blank",
                mobile10d: true
            }
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<form class="" action="" method="POST" id="form_id">
    <div class="col-md-4 form-group">
        <label class="form-control">Mobile<span class="required">*</span></label>
        <input class="form-control" type="text" name="mobile" id="mobile" placeholder="0-9">
    </div>
    <div class="col-md-4 form-group">
        <label class="form-control">Telephone<span class="required">*</span></label>
        <input class="form-control" type="text" name="telephone" id="telephone" placeholder="0-9">
    </div>
    <div class="form-group">
        <input type="submit" name="" value="Submit" class="apply-now-btn">
    </div>
</form>
0
Vijayan Jayaraman

問題があったのは.is(':empty')なので、ここに私の作業オプションの例を示します。

前：

rules: {
   name:       {required: true},
   email:      {required: true},
   phone:      {required: true}
}

すべてのフィールドwereは必須です。しかし、メールや電話が必要だったので、「または」を作成しました。

rules: {
   name:       {required: true},
   email:      {required: 
                    function() {
                        //returns true if phone is empty   
                        return !$("#phone").val();
                    }
               },
   phone:      {required:
                    function() {
                        //returns true if email is empty
                        return !$("#email").val();
                     }
               }
},
messages: {
   email: "Email is required if no phone number is given.",
   phone: "A phone number is required if no phone email is given."
}

デフォルトのメッセージでは各フィールドが必須であると表示されるため、ユーザーに意味のある情報を提供するmessagesオプションを追加したことがわかります。これはこの状況では当てはまりません。

0
Warren

これはやる

Mobile: {
    required: function(element) {
    return (jQuery.isEmptyObject($("#Phone").val()));
    }
},
Phone: {
    required: function(element) {
        return (jQuery.isEmptyObject($("#Mobile").val()));
    }
}
0
Salim Ali