jQuery Validate我想添加一个向上滚动缓慢的错误

时间:2014-11-25 09:07:23

标签: jquery scroll jquery-validate

我想在表单上添加一个慢速滚动到顶部错误,只是不确定如何在此脚本上实现它。我已经尝试过其他一些人的建议,但对此不熟悉也无法让它发挥作用。感谢

  $(function() {

    // Setup form validation on the #register-form element
    $("#frmFormMail").validate({
        // Specify the validation rules
        rules: {
            field_0: { // Title
                required: true,
                minlength: 3
            },
            field_1: { // Full Name
                required: true,
                email: true,
                minlength: 5
            },
            field_2: { // Address
                required: true,
                minlength: 20
            },
            field_3: { // Age
                required: true,
                minlength: 2
            },
            field_4: { // Marital Status
                required: true,
                minlength: 3
            },
            field_5: { // Children
                required: true,
                minlength: 1
            },
            field_6: { // Nationality
                required: true,
                minlength: 3
            },
            field_7: { // Health
                required: true,
                minlength: 10
            },
            field_8: { // Glasses
                required: true,
                minlength: 3
            },
            field_9: { // Car Licence
                required: true,
                minlength: 10
            },
            field_10: { // Nationality
                required: true,
                minlength: 3
            },
            field_11: { // Website of interest 1
                required: false,
                minlength: 5
            },
            field_12: { // Website of interest 2
                required: false,
                minlength: 5
            },
            field_13: { // Applying for Position
                required: true,
                minlength: 3
            },
            field_14: { // Resume
                required: true
            },
            field_15: { // Cv
                required: true
            },
            field_16: { // Present Job
                required: true,
                minlength: 10
            },
            field_17: { // When can You Start
                required: true,
                minlength: 3
            },
            field_18: { // Relocate Dropdown
                required: true // required: false not a required field, required: true required field
            },
            field_19: { // Last 3 Jobs
                required: true,
                minlength: 30
            },
            field_20: { // Attach Reference
                required: false
            },
            field_21: { // Attach Other of interest
                required: false
            },
            field_22: { // Sutible for this job
                required: true,
                minlength: 100
            },
            field_23: { // Sutible for this job
                required: true,
                minlength: 100
            },
            field_24: { // Comments questions
                required: false,
                minlength: 50
            },

        },
// Specify the validation error messages
        messages: {
            field_14: {
                required: "This field is required - will validate on submit"
            },
            field_15: {
                required: "This field is required - will validate on submit"
            },
        },

        submitHandler: function(form) {
            form.submit();
        }
    });

  });

1 个答案:

答案 0 :(得分:3)

可以使用jquery validator's invalidHandler回调来实现 来自jquery Validator Documentation

invalidHandler

Type: Function()
Callback for custom code when an invalid form is submitted. 

以事件对象作为第一个参数调用,验证器作为第二个参数调用。

所以你的代码可以像下面那样合并,例如,

$("#frmFormMail").validate({

  invalidHandler : function() {
       $('html, body').animate({
            scrollTop: $("#frmFormMail").offset().top // scroll top to your form on error
        }, 2000);
   }

});

inValidHandler reference

相关问题