用自己的自定义消息验证选择框，并在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=""替换value="Select Role"如下： -

示例： -

$(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>

参考： - 我可以将所需属性应用于＆lt; select＆gt;html5？

Answer 3

您可以这样尝试：

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