jQuery驗證：驗證一個字段，或者需要對兩個領域

我有我想驗證一個表單有兩個字段：jQuery驗證：驗證一個字段，或者需要對兩個領域

<div class="entryForm"> 
    <div class="formField"> 
     <label for="fieldEmailAddress">Email address:</label> 
     <input type="email" name="fieldEmailAddress" id="fieldEmailAddress"/> 
    </div> 
    <div class="formField"> 
     <label for="fieldMobileNumber">Mobile number:</label> 
     <input type="text" name="fieldMobileNumber" id="fieldMobileNumber"/> 
    </div> 
</div>

這裏是我的jQuery驗證wireup：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#form1').validate({ rules: { fieldMobileNumber: { phoneUS: true } } }); 
    }); 
</script>

我想要做的是添加一個額外的驗證規則：如果fieldEmailAddress和fieldMobileNumber都爲空，則表單無效。換句話說，我想使它至少需要fieldEmailAddress或fieldMobileNumber中的一個。看起來大多數jQuery Validation自定義方法都被設計爲一次只能處理一個字段 - 我需要驗證兩者。

任何想法？

來源

2013-09-24 J. Polfer

是否需要在「驗證」插件內完成？ – doitlikejustin

@doitlikejustin - 我正在使用jQuery驗證來驗證當前窗體。我認爲有一種方法可以根據我的規則使用jQuery驗證來驗證這些字段，我想我可以使用它。我會仔細看看你的答案（這裏是EOD），但它看起來非常有潛力。 –

只需使用'additional-methods.js'文件中包含的'require_from_group'方法即可。 – Sparky

你只需要包括the additional-methods.js file並使用require_from_group方法。

require_from_group: [x, '.class'] 

// x = number of items required from a group of items. 

// .class = class assigned to every form element included in the group.

jQuery的：

$(document).ready(function() { 

    $('#form1').validate({ 
     rules: { 
      fieldMobileNumber: { 
       phoneUS: true, 
       require_from_group: [1, '.mygroup'] 
      }, 
      fieldEmailAddress: { 
       require_from_group: [1, '.mygroup'] 
      } 
     }, 
     groups: { 
      theGroup: 'fieldMobileNumber fieldEmailAddress' 
     } 
    }); 

});

添加class="mygroup"給每個你需要組合在一起輸入...

<input type="email" name="fieldEmailAddress" id="fieldEmailAddress" class="mygroup" />

最後，根據需要使用groups選項忍下消息成一個...

groups: { 
    theGroup: 'fieldMobileNumber fieldEmailAddress' 
}

工作DEMO：http://jsfiddle.net/CYZZy/

如果你不喜歡的驗證消息放在哪裏，這就是你要使用errorPlacement回調函數調整它。

來源

2013-09-25 00:23:48 Sparky

我希望他們有更多關於additional-methods文件的文檔。我會確保下次再仔細閱讀。謝謝！ –

@ J.Polfer，不客氣。是的，它沒有很好的記錄，但是你可以在[additional-methods.js'文件]的註釋中找到[http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional- methods.js） – Sparky

您可以繞過驗證插件並做了檢查類似如下：

$("#form1").submit(function() { 
    var email = $('#fieldEmailAddress'); 
    var phone = $('#fieldMobileNumber'); 

    if(email.val() == '' && phone.val() == '') { 
     alert('Fill out both fields'); 
    } 
    else if(email.val() == '') { 
     alert('Email, please...'); 
    } 
    else if(phone.val() == '') { 
     alert('Phone, please...');  
    } 
    else { 
     alert('Yay!'); 
    } 
});

來源

2013-09-24 22:29:15 doitlikejustin

jQuery驗證：驗證一個字段，或者需要對兩個領域

回答

相關問題