0

私はウィザードのような方法で 4 つのセグメントに分割している非常に大きなフォームを持っています。ウィザード プラグイン (スマート ウィザード) には、現在フォーカスされているフォーム セグメントがあり、残りの 3 つのセグメントは dom に隠されています。

jquery 検証プラグインを使用して、その場でフォームを検証しています。問題は、表示されているフォームのその部分を検証することです。ユーザーが次のステップに移動したときにのみ、フォームのその部分で検証を実行したいと考えています。

要素の配列を指定して、検証プラグインがトリガーされたことを検証する方法はありますか?

ウィザード プラグインの onLeaveStep オプションで、validate プラグインを呼び出しました。ユーザーがクリックするかどうかに関係なく、次または前の検証がトリガーされます。

    var $myform = $("#registeration");
    var validator = $myform.validate({
        errorElement: "span",
        rules: {
            regtype: "required",
            firstname: "required",
            lastname: "required",
            address1: "required",
            city: "required",
            country: "required",
            phone1: "required",                 
            email: {
                 required: true,
                 email: true
            },
            attendees: {
                required: true,
                digits: true
            }
        },
        messages: {
            regtype: "Select an option",
            firstname: "Enter your first name",
            lastname: "Enter your last name",
            address1: "Enter your address",
            city: "Enter your city",
            country: "Enter your country",
            phone1: "Enter your phone number",
            email: "Enter your e-mail",
            attendees: "Enter number of persons attending (including yourself)"
        }               
    });
    // Initialize Smart Wizard      
    $('#wizard').smartWizard({
        transitionEffect:'slide',
        hideButtonsOnDisabled:true,
        transitionEffect: 'fade',
        onLeaveStep: function(){
            if(validator.form()){
                //$myform.trigger('submit');
                return true;
            }else{
                return false;
            }           
        }
    });
4

1 に答える 1

2

引用OP:

「ウィザード プラグインの onLeaveStep オプションで、検証プラグインを呼び出しました。ユーザーのクリックnextまたはprevious 検証がトリガーされるかどうか」

問題は.validate()、フォームの有効性を「テスト」する方法ではないことです。むしろ、フォーム上でプラグインを初期化.validate()するためのメソッドです。ページの読み込み時に一度実行すると、その後の呼び出しは無視されます。.validate()

jQuery Validate プラグインを使用してプログラムでフォームをテストするには、テストをトリガーしてブール値を返すメソッドを使用します。.valid()

jQuery Validate プラグインは、デフォルトで、「非表示」の入力要素も無視します。そのため、ウィザード プラグインを使用する際に、この機能を有利に活用できます。

DOM Ready ハンドラ内で...

$('#myform').validate({
   // rules & options
});

ウィザード内で...

onLeaveStep: function(){
    $('#myform').valid();
}

それ以外の場合は、複数ステップのフォームを作成するときに、form各セクションに固有のタグ セットを使用します。次に.valid()、次のセクションに移る前にセクションをテストします。(ページが完全にロードされたら、最初にプラグインを初期化し、各フォームで を呼び出すことを忘れないでください.validate()。) 次に、最後のセクションで、.serialize()すべてのセクションで使用し、送信するデータ クエリ文字列にそれぞれを連結します。

このようなもの...

$(document).ready(function() {

    $('#form1').validate({
        // rules
    });

    $('#form2').validate({
        // rules
    });

    $('#form3').validate({
        // rules,
        submitHandler: function (form) {
           // serialize and join data for all forms
           // ajax submit
           return false;
        }
    });

    $('#gotoStep2').on('click', function() {
        if ($('#form1').valid()) {
            // code to reveal step 2
        }
    });

    $('#gotoStep3').on('click', function() {
        if ($('#form2').valid()) {
            // code to reveal step 3
        }
    });

    // there is no third click handler since the plugin takes care of this with the
    // built-in submitHandler callback function on the last form.

});
于 2013-07-19T16:37:39.220 に答える