在 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"，因此将第一个下拉值设为空白。

Working Fiddle

Answer 2

你可以这样试试：

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

Answer 3

需要将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>

参考：- Can I apply the required attribute to <select> fields in HTML5?