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

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

Answer 3

您可以尝试这样：

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

在Jquery验证插件中使用自己的自定义消息和规则验证选择框

3 个答案: