Question

我的表格很像这里的表格 http://jsfiddle.net/Gajotres/TthG9/
但由于表单很长，我需要页面顺利滚动到第一个元素有错误，请看看我的代码：

highlight: function(label) {
        $(label).parent().find('.valid').each(function(){
            $('label[class^="valid"]').remove();       
        });
    },        
    success: function(label) {
        if(label.text('OK!').parent().find('.valid').html() == null) {
            label.removeClass('error').addClass('valid');  
        } else {
            label.remove();
        }
    },
     errorPlacement: function(error, element) {
        if (element.attr("name") == "firstname")
            {
                error.insertAfter("lastname");
            }
            else
            {
                error.insertAfter(element);
            }
        $.scrollTo(element, {duration: 750});
        }
    });


$("#frmsubmit").validate().form();
    $('label[class^="error"]:not(.valid)').remove();

因为你看到我必须在页面加载时验证表单以检查标记正确的字段（根据客户要求），所以scrollTo使页面在加载时摇摆然后在验证时摇摆，我想那是因为它验证了两次。我怎样才能以正确的方式做到这一点。

由于

Answer 1

好的，我找到了一个技巧，但它会做，我在页面顶部设置一个全局变量，例如

var firstcheck = 0

在错误处理程序

中

if (firstcheck == 1){
$.scrollTo(element, {duration: 750});
}

在我调用form（）后，我将其设置为1

Answer 2

这可以通过多种方式完成。假设您要滚动到第一个错误，然后执行此操作：

$(document).ready(function(){
    $('#contact-form').validate(
    {
        rules: {
            name: {
                minlength: 2,
                required: true
            },
            email: {
                required: true,
                email: true
            },
            subject: {
                minlength: 2,
                required: true
            },
            message: {
                minlength: 2,
                required: true
            }
        },
        highlight: function(label) {
            $(label).parent().find('.valid').each(function(){
                $('label[class^="valid"]').remove(); 
                $(label).offset().top                
            });
        },        
        success: function(label) {
            if(label.text('OK!').parent().find('.valid').html() == null) {
                label.removeClass('error').addClass('valid');  
            } else {
                label.remove();
            }
        }        
    });
    $("#contact-form").validate().form();
    $('label[class^="error"]:not(.valid)').remove();
});

JSFiddle

ScrollTo元素验证

2 个答案: