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は、読み込み時にページをスイングし、検証時にスイングします。これは、2回検証されるためだと思います。どうすれば正しい方法でそれを行うことができますか。

ありがとう

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 に答える