在Jquery驗證插件中使用自己的自定義消息和規則驗證選擇框

Question

當我使用jquery驗證插件時，它對我的​​下拉框沒有正常工作..

我的HTML代碼是

<select class="control-select form-control" name="job_title" id="job_title" >
  <option value="Select Role">-- Select Role--</option>                              
  <option value="Admin" {{ ($admin->job_title=="Admin") ? "selected" : "" }}>Admin</option>
  <option value="Subadmin" {{ ($admin->job_title=="Subadmin") ? "selected" : "" }}>Subadmin</option>
  <option value="Superadmin" {{ ($admin->job_title=="Superadmin") ? "selected" : "" }}>Superadmin</option>
</select>

在jquery驗證規則中我給出了這樣的

"job_title": {
    required: true
},

但是沒有工作，所以如何使選擇框作為必填字段的替代方式

Answer 1

它工作正常，問題出在你的html中，檢查這一行：

<option value="Select Role">-- Select Role--</option>  

要使用驗證插件驗證下拉列表，您必須將第一個下拉值傳遞為空白，如：

<option value="">-- Select Role--</option>  

試試這個，它會解決你的問題。

說明： require驗證將檢查value屬性，但在您的情況下，值為value="Select Role" ，因此將第一個下拉列值設為空。

工作小提琴

Answer 2

需要更換value="Select Role"與value=""象下面這樣： -

例：-

 $(document).ready(function() { $("#signupForm").validate({ rules: { "job_title": { required: 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.16.0/jquery.validate.min.js"></script> <form id="signupForm"> <select class="control-select form-control" name="job_title" id="job_title"> <option value="">-- Select Role--</option> <option value="Admin">Admin</option> <option value="Subadmin">Subadmin</option> <option value="Superadmin">Superadmin</option> </select> <input type ="submit" value = "click me"> </form> 

參考： - 我可以將所需屬性應用於HTML5中的<select>字段嗎？

Answer 3

你可以嘗試這樣：

$("form").validate({
  rules: {
  job_title: { valueNotEquals: "default" }
  },
  messages: {
  job_title: { valueNotEquals: "Please select field" }
  }  
});