验证成功控制

Question

这是我的代码。我的主要问题是 var validationbool 触发成功，即使只有一个联系表单字段有效并且它不关心其他字段是否无效。只有当所有元素都有效时，我才能创建更好的控制 var validationbool = true。

$(document).ready(function () {

    var validationBool = false;

    $('#register-form').validate({
        rules: {
            name: {
                    minlength: 3,
                    required: true
                },
                email: {
                    required: true,
                    email: true
                },
                phone: {
                    required: true,
                    minlength: 10
                },
                country: {
                    required: true
                },
                boat: {
                    required: true
                },
                lat: {
                    required: true
                },


                registration: {
                    required: true
                },

                file: {
                    required: true
                }
        },
        highlight: function (element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');

            validationBool = false;
        },
        success: function (element) {
            element.text('').addClass('valid').closest('.control-group').removeClass('error').addClass('success');

            validationBool = true;
        }
    });

    $('#register-form').on('submit', function(e){
        e.preventDefault();
        if(validationBool){

            var theData = {
                 name: $('#name').val(),
                 phone: $('#phone').val(),
                 email: $('#email').val(),
                 country: $('#country').val(),
                 lat: $('#lat').val(),
                 lng: $('#lng').val(),
                 boat: $('#boat').val(),
                 registration: $('#registration').val(),
                 file: $('#file').val()
            };

            $.ajax({ // ajax call starts
                url: "functions/enroll.php",
                type: 'post',
                data: theData,
                success: function(data)
                {
                    swal("Your request has been recieved!", "We will contact you for confirmation soon", "success");
                    document.getElementById('name').value='',
                    document.getElementById('phone').value='',
                    document.getElementById('email').value='',
                    document.getElementById('country').value='',
                    document.getElementById('lat').value='',
                    document.getElementById('lng').value='',
                    document.getElementById('boat').value='',
                    document.getElementById('file').value='',
                    document.getElementById('registration').value='';

                }
            });
        }
    });
});

Answer 1

我会使用.valid() 方法。

这将像

一样打印

var myForm = $("#register-form"); myForm.validate();

然后，不要使用“validationBool”变量，而是使用

if (myForm.valid())

检查表单是否经过验证 - 这将检查所有字段。

Answer 2

这是我认为validate() 对你有用的东西：

[注意：这只是我使用的一个示例，您可以使用类似的方法 - 您不必明确使用任何 boolean 变量来知道您是否可以提交。

请注意，我用过：

1. Invalidate Handler - 提交无效表单时回调自定义代码。以事件对象作为第一个参数调用，验证器作为第二个参数。
2. Submit Handler - 表单有效时处理实际提交的回调。获取表单作为唯一参数。替换默认提交。验证后通过 Ajax 提交表单的正确位置。

HTML 代码：

<form class="cmxform" id="commentForm" method="get" action="http://www.google.com">
    <fieldset>
        <legend>Please provide your name, email address (won't be published) and a comment</legend>
        <p>
            <label for="cname">Name (required, at least 2 characters)</label>
            <input id="cname" name="name" minlength="2" type="text" />
        </p>
        <p>
            <label for="cemail">E-Mail (required)</label>
            <input id="cemail" type="email" name="email" />
        </p>
        <p>
            <label for="curl">URL (optional)</label>
            <input id="curl" type="url" name="url" />
        </p>
        <p>
            <label for="ccomment">Your comment (required)</label>
            <textarea id="ccomment" name="comment"></textarea>
        </p>
        <p>
            <input class="submit" type="submit" value="Submit" />
        </p>
    </fieldset>
</form>

JS 代码：

$("#commentForm").validate({
    rules: {
        name: {
            minlength: 3,
            required: true
        },
        email: {
            required: true,
            email: true
        },
        phone: {
            required: true,
            minlength: 10
        },
        country: {
            required: true
        },
        boat: {
            required: true
        },
        lat: {
            required: true
        },
        registration: {
            required: true
        },
        file: {
            required: true
        }
    },
    invalidHandler: function (event, validator) {
        var errors = validator.numberOfInvalids();
        /*Here you will get your errors
            if (errors) {
              var message = errors == 1
                    ? 'You missed 1 field. It has been highlighted'
                    : 'You missed ' + errors + ' fields. They have been highlighted';
              $("div.error span").html(message);
              $("div.error").show();
        } else {
          $("div.error").hide();
        }*/
        alert(errors);
    },
    submitHandler: function (element) {
        //Handler for submit action
        //$(form).ajaxSubmit();
        alert("submit");
    }
});

JSFiddle Link here