JQuery驗證：如果填寫了兩個可選的字段，則失敗？

Question

我有我試圖驗證有兩個字段都是可選的一種形式：

<label><b>URL Webcam Image:</b></label> 
<p></p> 
<input type="text" name="photo" id="photo" class="input" /> 
<p></p> 
<label><b>Upload</b></label> 
    <br/><span>JPG, max. 200 kb</span> 
<input type='file' name='uploaded_file' id="uploaded_file" /> 
<p></p> 

，而是如果僅此領域的一個充滿如果兩個字段填寫並應確定驗證應該失敗，或兩者字段爲空 我無法找到與jQuery驗證的方法，使這個..所有我發現是必要條件，但我不希望它FOT這兩個字段

Answer 1

必須使用the addMethod() method寫新的自定義規則。

$.validator.addMethod('notBoth', function (value, element, param) { 
    return this.optional(element) || ($(element).is(':filled') && $('[name="' + param + '"]').is(':blank')); 
}, "you must leave one of these blank"); 

$('#myform').validate({ 
    rules: { 
     foo: { 
      notBoth: 'bar' 
     }, 
     bar: { 
      notBoth: 'foo' 
     } 
    } 
}); 

DEMO：http://jsfiddle.net/uv23hgr7/

您還需要使用groups和errorPlacement選項鞏固兩個錯誤消息中一個，並將其放在您的佈局中。

Answer 2

這檢查是否兩個圖像數據字段都有值。如果只有一個填寫，真正提交被觸發：

var orig = $('#uploaded_file').get(0).outerHTML; 
 
    window.validatePic = function() { 
 
     valid = !($('#photo').val() && $('#uploaded_file').val()); 
 
     if (valid) { 
 
      $('#realSubmit').click(); 
 
     } else { 
 
      alert('Please choose only one image.'); 
 
      $('#photo').val(''); 
 
      $('#uploaded_file').after(orig); 
 
      $('#uploaded_file').remove(); 
 
     } 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form>... other form options 
 
    <br> 
 
    <br> 
 
    <label><b>URL Webcam Image:</b> 
 

 
     <label /> 
 
     <p></p> 
 
     <input type="text" name="photo" id="photo" class="input" /> 
 
     <p></p> 
 
     <label><b>Upload</b> 
 

 
      <label /> 
 
      <br/><span>JPG, max. 200 kb</span> 
 
      <input type='file' name='uploaded_file' id="uploaded_file" /> 
 
      <p></p> 
 
      <button type="button" onclick="validatePic()">Submit</button> 
 
      <button type="submit" id="realSubmit" style="display: none">hidden</button> 
 
</form>