jquery验证器在无效时仍然关闭

Question

我不知道我做错了什么。我在其中制作了一个带有表单的模态我通过执行.valid();检查表单是否有效甚至在你做错了什么时都很难并且字段变成红色所以jquery验证器检测到你做错了它仍然返回true我一直在寻找为什么这种情况发生了1天。我想也许你们其中一个人或女孩都知道。

这是一个有效的snipplet https://jsfiddle.net/jgytud7h/6/

提前致谢！

编辑：如果您填写第一个字段并选择一个类型。它会关闭甚至很难，这种形式在我眼里是无效的。

HTML：

<span class="data-label" data-toggle="modal" data-target="#adddnsmodal" onclick="">Add DNS</span>                                 <div class="modal fade" id="adddnsmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Add DNS</h4>
            </div>
            <div class="modal-body">
                <form id="modalvalidate" name="validatemodal1">
                    <div class="input-group">
                        <input type="text" id="domainadd" class="form-control" value="test" disabled>
                        <span class="input-group-addon">Domain</span>
                    </div>
                    <br>
                    <div class="input-group">
                        <input type="text" id="extadd" class="form-control" value="nl" disabled>
                        <span class="input-group-addon">Extention</span>
                    </div>
                    <br>
                    <div class="input-group">
                        <input type="text" id="nameadd" class="form-control subdomain" required>
                        <span class="input-group-addon">Sub domain</span>
                    </div>
                    <br>
                    <div class="input-group">
                        <input type="text" id="contentadd" class="form-control" required>
                        <span class="input-group-addon">Content</span>
                    </div>
                    <br>
                    <div class="input-group">
                        <input type="number" id="prioadd" class="form-control prio" required>
                        <span class="input-group-addon">Prio</span>
                    </div>
                    <br>
                    <div class="input-group">
                        <input type="number" id="ttladd" class="form-control onlynumbers" required>
                        <span class="input-group-addon">TTL</span>
                    </div>
                    <br>
                    <div class="input-group">
                        <select class="form-control" id="typeadd">
                            <option value="notselected" selected disabled>Select a type</option>
                            <option value="A">A</option>
                            <option value="AAAA">AAAA</option>
                            <option value="CNAME">CNAME</option>
                            <option value="MX">MX</option>
                            <option value="SOA">SOA</option>
                            <option value="TXT">TXT</option>
                            <option value="SRV">SRV</option>
                        </select>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" id="adddnssave">Save changes</button>
            </div>
        </div>
    </div>
</div>

Jquery的：

.validator.addMethod("subdomain", function(value, element) {
  return this.optional(element) || /^[A-Za-z0-9](?:[A-Za-z0-9\-]{0,61}[A-Za-z0-9])?$/i.test(value);
    },"<strong>Error! </strong>Invalid subdomain.<span></span><button type='button' class='close' onclick='removeMSG()' aria-label='Close'><span aria-hidden='true'>&times;</span></button>");

$.validator.addMethod("domain", function(value, element) {
  return this.optional(element) || /^(([a-zA-Z]{1})|([a-zA-Z]{1}[a-zA-Z]{1})|([a-zA-Z]{1}[0-9]{1})|([0-9]{1}[a-zA-Z]{1})|([a-zA-Z0-9][a-zA-Z0-9-_]{1,61}[a-zA-Z0-9]))\.([a-zA-Z]{2,6}|[a-zA-Z0-9-]{2,30}\.[a-zA-Z]{2,3})$/i.test(value);
    },"<strong>Error! </strong>Invalid domain.<span></span><button type='button' class='close' onclick='removeMSG()' aria-      label='Close'><span aria-hidden='true'>&times;</span></button>");

$.validator.addMethod("prio", function(value, element) {
  return this.optional(element) || /^(10|1)$/i.test(value);
    },"<strong>Error! </strong>Invalid Prio.<span></span><button type='button' class='close' onclick='removeMSG()' aria-label='Close'><span aria-hidden='true'>&times;</span></button>");

$.validator.addMethod("onlynumbers", function(value, element) {
  return this.optional(element) || /^[0-9]+$/i.test(value);
    },"<strong>Error! </strong>Field Must contain only numbers<span></span><button type='button' class='close' onclick='removeMSG()' aria-label='Close'><span aria-hidden='true'>&times;</span></button>");




 $('form[name*="validate"]').validate({
        errorElement:'div',
        errorClass: 'alert alert-danger',
        validClass: 'alert-success',
        onkeyup: false,
        onclick: false,
        errorPlacement: function(error, element) {
            error.addClass('messagediv2');
            error.addClass('page-controls');
            error.insertAfter("h4.modal-title");

        }
    });
    $('form[name*="validate"]').on('change', function(){
        $(this).validate();
        if ($(this).valid) {
            $(".messagediv2").remove();
        }
    });




 $('#adddnssave').on('click', function () {
        $('#adddnssave').prop('disabled', true);

                if ($('#typeadd').val() != 'notselected'  && $('#typeadd').val() != null) {
                    if ($('form[name*="validate"]').valid()) {
                        $.ajax({
                            url: "",
                            type: "post",
                            data: {
                                domain: $('#domainadd').val(),
                                ext: $('#extadd').val(),
                                name: $('#nameadd').val(),
                                type: $('#typeadd').val(),
                                content: $('#contentadd').val(),
                                prio: $('#prioadd').val(),
                                ttl: $('#ttladd').val()
                            },
                            dataType: "json",
                            success: function (response) {
                                var message =
                                    '<div class="page-controls alert alert-success" style="top:50px;position:relative;border-radius: 0 0 0.25rem 0.25rem;">' +
                                    '<strong>' + response + ' </strong> <span>DNS is successfully added</span>' +
                                    '<button type="button" class="close" aria-label="Close">' +
                                    '<span aria-hidden="true" onclick="removeMSG()" >&times;</span>' +
                                    '</button>' +
                                    '</div>';
                                $('#adddnsmodal').modal('hide');
                                $("#navbarmenue").after(message);
                                setTimeout(function () {
                                    $('#adddnssave').prop('disabled', false);
                                }, 2000);

                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                setTimeout(function () {
                                    $('#adddnssave').prop('disabled', false);
                                }, 1500);
                                console.log(textStatus, errorThrown, 'error');

                            }
                        });
                    } else {
                        $('#adddnssave').prop('disabled', false);
                             var message =
                                    '<div class="page-controls alert alert-danger" style="top:50px;position:relative;border-radius: 0 0 0.25rem 0.25rem;">' +
                                    '<strong>' + response + ' </strong> <span>Modal is not valid</span>' +
                                    '<button type="button" class="close" aria-label="Close">' +
                                    '<span aria-hidden="true" onclick="removeMSG()" >&times;</span>' +
                                    '</button>' +
                                    '</div>';
                                $("#navbarmenue").after(message); 
                    }


                } else {
                    var message =
                        '<div class="page-controls alert alert-danger messagediv2">' +
                        '<strong>Error </strong> <span>Select a type</span>' +
                        '<button type="button" class="close" aria-label="Close">' +
                        '<span aria-hidden="true" onclick="removeMSG()" >&times;</span>' +
                        '</button>' +
                        '</div>';
                    $("h4.modal-title").before(message);
                    setTimeout(function () {
                        $('#adddnssave').prop('disabled', false);
                    }, 1500);
                }
            });

Answer 1

在您的jsfiddle示例中，您正在检查有效的表单，但有效的不是属性而是函数。

改变这个：

if ($('form[name*="validate"]').valid) {

到

if ($('form[name*="validate"]').valid()) {

示例here

更新：另一个问题是缺少jquery验证的强制名称属性。添加名称属性修复了问题。