jquery 对类型为 "div"的 'Button' 标签进行验证

Question

您好，我正处于验证的学习阶段，我正在尝试在 div 标记上添加验证，当我单击 type=button 时，我会在该标记上添加验证。

这是我的代码。

    <div id="addlblist">
    <select class="myselect2" name="tst">
    </select>
    <select class="myselect2" name="lbname">
    </select>
    <input type="text" name="TestDate" />

    <input type="button" id="btn"/>
</div>

这是我在其中设置验证的 jquery 代码。我希望当我单击类型按钮时，它会调用所需的客户端验证。请指导我如何执行此操作。

<script>
 $(document).ready(function () {
                        $("#addlblist").validate({
                            rules: {
                                'tst': {
                                    required: true
                                },
                                'lbname':
                                {
                                    required: true
                                },
                                'TestDate': {
                                    required: true
                                }
                            },
                            messages: {
                                'tst': {
                                    required: "Select Test Name"

                                },
                                'lbname':
                                {
                                    required: "Select Lab Name"
                                },
                                'TestDate': {
                                    required: "Select Date for Test"
                                }

                            },
                            submitHandler: function (form) {
                                form.submit();
                            }

                        })
                    });
            </script>

Answer 1

您将需要一个自定义方法来验证选择标记$.validator.addMethod。

以下是如何解决您的问题的一个非常基本的示例:

$(document).ready(function () {

  $.validator.addMethod("valueNotEquals", function(value, element, arg){
    return arg !== value;
   }, "Please select an option");

  $("#addlblist").validate({
    submitHandler: function (form) {
      alert('validated');
    },
    rules: {
      'tst': {valueNotEquals: "Default" },
      'lbname': {valueNotEquals: "Default"},
      'TestDate': {required: true}
    },
    messages: {
      'tst': {required: "Select Test Name"},
      'lbname': {required: "Select Lab Name"},
      'TestDate': {required: "Select Date for Test"}
    }
  })
});

label.error {
  color: red;
  display: block;
}

<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.17.0/jquery.validate.js"></script>

<form id="addlblist">
  <p><select class="myselect2" name="tst">
    <option>Default</option>
    <option>Option1</option>
    <option>Option2</option>
  </select>
  <select class="myselect2" name="lbname">
    <option>Default</option>
    <option>Option1</option>
    <option>Option2</option>
  </select></p>
  <p><input type="text" name="TestDate" required/></p>
  <p><input id="btn" value="Validate" type="submit"/></p>
</form>