0

我正在使用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>
4

1 回答 1

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
    }
});
于 2015-06-04T05:20:34.873 回答