javascript中选择框的验证

Question

你好，我开发了一个表单，里面有输入框和选择框。我想对选择框和输入框进行验证。我只能对输入框进行验证。我无法对带有输入框的选择框进行验证。

$(document).ready(function(){
    $("#myform").validate();
  });

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<form action="#" id="myform">

      <label class="label1 col-md-4">Enter Template Name
        <span class="required"> * </span>
      </label>

      <input id="templateName" type="text" data-required="1" class="form-control" />
      </br>

      <label class="label1 col-md-4">Enter Admission Year
        <span class="required"> * </span>
      </label>


      <input id="admissionYear" type="text" data-required="1" maxlength="4" />
      </br>

      <label class="label1 col-md-4">Select the type of eligibility
        <span class="required"> * </span>
      </label>

      <select id="reportsSelect" class="form-control" data-placeholder="Select" tabindex="1">
        <option value="0">Choose</option>
        <option value="overall">Overall</option>
        <option value="specific">Specific subject</option>
      </select>
      </br>

      <button type="button">Submit</button>
    </form>

Answer 1

这里有几个“问题”。

• 您的标签不引用它们所属的输入，无论是通过将输入包含在其中，还是使用 for 属性来引用相应输入的 ID。

• placeholder <select> 毫无意义

• 您应该使用required，而不是data-required="1" - 这让浏览器无需任何代码即可进行验证。如果您有任何 jQuery 验证，请将其删除。这是 2017 年，you don't need it :p

• select 的“无值”选项应为 <option value="">。然后您可以将required 添加到<select> 以要求用户选择一个非空值。

• 使用<input type="submit" value="Submit" /> 或<button type="submit">Submit</button>，而不是<button type="button">

• 我假设您有一个 jQuery 事件处理程序来处理表单。如果您使用required 属性（浏览器本机验证），那么您只需在表单上侦听.on('submit') 事件 - 如果任何内容无效，它将不会触发。

Answer 2

$(document).ready(function(){
    $("#myform").validate();
  });

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<form action="#" id="myform">

      <label class="label1 col-md-4">Enter Template Name
        <span class="required"> * </span>
      </label>

      <input id="templateName" type="text" data-required="1" class="form-control" />
      </br>

      <label class="label1 col-md-4">Enter Admission Year
        <span class="required"> </span>
      </label>


      <input id="admissionYear" type="text" data-required="1" maxlength="4" />
      </br>

      <label class="label1 col-md-4">Select the type of eligibility
        <span class="required"> * </span>
      </label>

      <select id="reportsSelect" class="form-control" data-placeholder="Select" tabindex="1">
        <option value="0">Choose</option>
        <option value="overall">Overall</option>
        <option value="specific">Specific subject</option>
      </select>
      </br>

      <button type="button">Submit</button>
    </form>