0

我有一个表单，它的功能很像这里的
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 使页面在加载时摆动然后在验证时摆动，我猜那是因为它验证了两次。我怎样才能以正确的方式做到这一点。

谢谢

4

2 回答 2

1

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

var firstcheck = 0

在错误处理程序内部

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

在我调用 form() 之后，我将其设置为 1

于 2012-12-24T11:15:29.050 回答
0

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

$(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

于 2012-12-24T10:27:27.350 回答