对“按钮”类型的“div”标签进行 jquery 验证

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>

Answer 2

为了使 jquery 验证尝试下面的代码，不需要其他文件。

  var validatstatus;
    function validcheck(currntcheck) {
        validatstatus = true;
        $(currntcheck).closest('div').find('input,div[contenteditable="true"]').each(function () {
            if ($(this).val().trim() == '' && $(this).is("input") && $(this).attr('required')) {
                alert($(this).attr('data-required'));
                $(this).focus();
                validatstatus = false;
                return false;
            }
            else if ($(this).text().trim() == '' && $(this).is('div') && $(this).attr('required')) {
                alert($(this).attr('data-required'));
                $(this).focus();
                validatstatus = false;
                return false;
            }

        })
    }

    $(document).ready(function () {
        $('#btnis').click(function () {
            validcheck(this);
            if (validatstatus == true) { alert('success'); }
        })
    })

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div>
        <input type="text" required="true" data-required="please fill Name" />
        <input type="text" />
        <input type="text" required="true" data-required="please fill address" />
        <div contenteditable="true" style="border:1px solid gray; width:150px;" required="true"
            data-required="please fill message"></div>

        <input type="button" value="check validation" id="btnis" />
    </div>

在上面的代码中，$(document).ready()方法中的按钮点击调用，可以作为onclick调用。