如何在jquery-validation中验证选择框?

时间:2017-07-19 19:27:03

标签: javascript jquery html validation

如何检查多个表单中的选定框?我的第一个选择是<option selected disabled hidden style="display:none" value="default"></option>

我的小提琴:http://jsfiddle.net/K6Tkn/91/

虽然选择框具有必需属性,但它仅验证输入字段。

单击警报按钮时如何检查验证?在这个例子中,我必须填写输入,然后单击发送按钮,然后单击警报按钮。

$(document).ready(function() {
  $('form').each(function() {
    $(this).validate({
      submitHandler: function(form) { // for demo
        $('#test').on('click', function() {
          alert('valid form'); //should simulate a next button for multi step form
        });
        return false;
      }
    });
  });
});
<form>
  <input type="text" name="username" minlength="3" required="required" />
  <select id="selectCatalog" name="selectCatalog" class="form-control">
    <option selected disabled hidden style="display:none" value="default" required="required"></option>
    <option value="option1">option1</option>
    <option value="option2">option2</option>
  </select>
  <input type="submit" value="Send" />
</form>

<form>
  <input type="text" name="email" required="required">
  <input type="submit" value="Send" />
</form>

<button id="test">Alert</button>

1 个答案:

答案 0 :(得分:0)

如果您想要定位输入并选择下拉列表,则必须添加$.validator.addMethod

$.validator.addMethod("validOrNah", function(value, element) {


  if ($("#username").val() === "" || $("#selectCatalog")[0].selectedIndex === 0) {
    return false;
  } 
    return true;

}, "Please enter in text and select dropdown");

$(this).validate({
  rules: {
    selectCatalog: {
      validOrNah: true
    }
  },

http://jsfiddle.net/ayang10/K6Tkn/129/