jQuery検証 - 2つのフィールド、1つのフィールドに入力するだけです

Question

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

どのようにしてユーザーが1つのフィールドに入力する必要がありますか？どちらのフィールドでもかまいませんか？

Answer 1

これは、あなたがdependency-callback

が、これはあなたがすることができますどのように使用するために必要なもののように見えることです。

は、与えられたコールバックの結果に応じて、必要な要素を作成します。

required検証ルールは、関数コールバックからの戻り値に基づいてのみ必要となる2つの電話フィールドに配置できます。したがって、移動フィールドがブランクである場合にのみこのルールを要求し、移動フィールドではその逆のルールを電話欄に設定することができます。

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

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

は、可能な更新の答えのコメント/他の回答を確認してください。

Answer 2

ここで同じ回答を探しています。上記の投稿は非常に参考になりました。ありがとう。

他のフィールドが実際に有効であるかどうかをチェックするために、このソリューションを拡張しました。これにより、モバイルフィールドから「必須」クラスを削除する前に、ユーザーが有効な電話番号を入力することが保証されます。

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

Answer 3

正しい方法は「require_from_group」メソッドを使用していると思います。あなたはhttp://jqueryvalidation.org/require_from_group-method/

に例をcheckitでき

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

<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> 

それは

Answer 4

要件のいずれかであることを検証する必要がありますされて追加の-methods.jsを含めることは必須です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" 

Answer 5

私は悩みを持っていたので、ここで.is(':empty')である私の作業オプションの一例です。前

：

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

すべての分野が必要ました。

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オプションを追加したことがわかります。しかし、私はそう「または」を作成するために、電子メールおよび/または電話を望んでいましたこの状況では真ではないフィールドが必要です。

Answer 6

$(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>