jQuery驗證從領域

Question

我試圖驗證具有以下結構的形式相關：

<form id="myform" action="#" method="post"> 
    <fieldset> 
     <legend>Form 1</legend> 
     <label for="field1">Certificate Number</label> 
     <input id="field1" type="text" class="myClass1" name="field1" placeholder="field1"> 
    </fieldset> 
    <fieldset> 
     <legend>Form 2</legend> 
     <label for="field2">Certificate Number</label> 
     <input id="field2" type="text" class="myClass2" name="field2" placeholder="field2"> 
     <br> 
     <label for="field3">Redemption Code</label> 
     <input id="field3" type="text" class="myClass2" name="field3" placeholder="field3"> 
    </fieldset> 
    <input type="submit" value="Continue"> 
</form> 

我想驗證以下條件：

(field1 || (field2 && field3)) 

這是非常簡單的，但我不知道如何使用jQuery Validate插件實現這一點。

Answer 1

可能有一種方法可以使用require_from_group。

雖然你可以使用required作爲一個函數象下面這樣： -

$('#myform').validate({ 
 
    rules: { 
 
    field1:{ 
 
     required:function(){ return !$('#field2').val().length && !$('#field3').val().length; } 
 
     }, 
 
    field2:{ 
 
     required:function(){ return !$('#field1').val().length } 
 
     }, 
 
    field3:{ 
 
     required:function(){ return !$('#field1').val().length } 
 
     } 
 
    } 
 
});

<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.15.0/jquery.validate.min.js"></script> 
 

 
<form id="myform" action="#" method="post"> 
 
    <fieldset> 
 
    <legend>Form 1</legend> 
 
    <label for="field1">Certificate Number</label> 
 
    <input id="field1" type="text" class="myClass1" name="field1" placeholder="field1"> 
 
    </fieldset> 
 
    <fieldset> 
 
    <legend>Form 2</legend> 
 
    <label for="field2">Certificate Number</label> 
 
    <input id="field2" type="text" class="myClass2" name="field2" placeholder="field2"> 
 
    <br> 
 
    <label for="field3">Redemption Code</label> 
 
    <input id="field3" type="text" class="myClass2" name="field3" placeholder="field3"> 
 
    </fieldset> 
 
    <input type="submit" value="Continue"> 
 
</form>