Question

我正在使用 jQuery-FormValidator 插件来验证客户端的表单，但无论他们在上面的链接中给出的添加回调函数的建议都没有触发，而是会显示正确的错误在尝试提交时。我需要在下面的代码中添加什么才能使这些事件发挥作用？

$.validate("#contact-form",{
    validateOnBlur: true, // disable validation when input looses focus
    errorMessagePosition: 'top',
    scrollToTopOnError: true, // Set this property to true if you have a long form
    onError: function () {
        alert('hi');
        $('html,body').animate({
            'scrollTop': '2994'
        });
        toastr.error("Validation errors", "Error");
    },
    onSuccess : function() {
        alert('The form is valid!');
        return false; // Will stop the submission of the form
    }
});

呈现HTML

<form action="/Home/SendMessage" class="wow bounceInUp has-validation-callback animated" data-wow-delay="0.2s" data-wow-offset="10" id="contact-form" method="post" style="visibility: visible;-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;">    <div class="row marginbot-20">
        <div class="col-md-6 xs-marginbot-20 has-error">
            <input class="form-control input-lg error" data-val="true" data-val-required="The name field is required." data-validation="length" data-validation-length="min5" id="name" name="name" placeholder="Enter name*" type="text" value="" current-error="The input value is shorter than 5 characters" style="border-color: red;">
        <span class="help-block form-error">The input value is shorter than 5 characters</span></div>
        <div class="col-md-6 has-error">
            <input class="form-control input-lg error" data-placement="top" data-toggle="tooltip" data-val="true" data-val-required="The email field is required." data-validation="email" id="email" name="email" placeholder="Enter email*" title="" type="text" value="" data-original-title="Your email id will be kept private" current-error="You have not given a correct e-mail address" style="border-color: red;">
        <span class="help-block form-error">You have not given a correct e-mail address</span></div>
    </div>
    <div class="row">
        <div class="col-md-6 xs-marginbot-20">
            <div class="form-group has-error">
                <input class="form-control input-lg error" data-placement="top" data-toggle="tooltip" data-val="true" data-val-required="The contact field is required." data-validation="custom" data-validation-regexp="^[789]\d{9}$" id="contact" name="contact" placeholder="Enter contact*" title="" type="text" value="" data-original-title="We will reach you with this contact info" current-error="The input value is incorrect" style="border-color: red;">
            <span class="help-block form-error">The input value is incorrect</span></div>
            </div>
        <div class="col-md-6 has-error">
            <input class="form-control input-lg error" data-val="true" data-val-required="The subject field is required." data-validation="length" data-validation-length="10-100" id="subject" name="subject" placeholder="Enter subject*" type="text" value="" current-error="The input value must be between 10-100 characters" style="border-color: red;">
        <span class="help-block form-error">The input value must be between 10-100 characters</span></div>

        <div class="col-md-12">
            <div class="form-group has-error">
                <textarea class="form-control error" cols="25" data-val="true" data-val-required="The message field is required." data-validation="length" data-validation-length="30-400" id="message" name="message" placeholder="Your Message [Max 400 characters]*" rows="4" current-error="The input value must be between 30-400 characters" style="border-color: red;"></textarea>
                <div class="text-right"> <span id="maxlength">400</span> characters left</div>
            <span class="help-block form-error">The input value must be between 30-400 characters</span></div>
            <button type="submit" class="btn btn-skin btn-lg btn-block btn-border" id="btnContactUs">
                Send Message
            </button>
        </div>
    </div>
</form>

Answer 1

确定。这应该是这样的：

$.validate({
    form:'#contact-form',
    validateOnBlur: true, // enable validation when input looses focus
    scrollToTopOnError: true, // Set this property to true if you have a long form
    borderColorOnError: "#a94442",
    borderColorOnSuccess:"#a94442",
    onError: function () {
       //Display error message
        return false;
    },
    onSuccess: function () {
        $("#btnContactUs").button('loading');
        $('.form-contact form').find('input,textarea').attr('readonly', true).addClass('disabled');
        var formdata = new FormData($('.form-contact form').get(0));
        $.when(
            $.ajax({
                url: $("#contact-form").attr('action'),
                type: 'POST',
                data: formdata,
                processData: false,
                contentType: false,
                success:function(data)
                {
                    if(data.result)
                    {
                        //success Message
                    }
                    else
                    {
                        //Serverside error
                    }
                },
                error:function(data)
                {
                    //Server side error
                }
            })
        ).then(function(){
            $("#btnContactUs").button('reset');
            $('.form-contact form').find('input,textarea').attr('readonly', false).removeClass('disabled');
        });
        return false; // Will stop the submission of the form
    }
});

jquery-form验证回调不起作用

1 个答案: