jquery - Twitter Bootstrap Form Wizard/Jquery.validate - フォームが有効でない場合、ユーザーが次のタブに移動できないようにする

Question

これまでのところ、私は次のことを試しました：

onNext最初に、これif (!form.valid()) { return false; }でもユーザーは次のタブに移動しました。
onNext- 最初に:

if (!form.valid()) {

$('.error').first().focus()

false を返します。

}

それでも、ウィザードは次のタブに移動しました。

`$('.button-next').click( function (e) {

  if (!form.valid()) {

    e.preventDefualt();

    return false;
   }

 return true;

}`

それでも助けにはなりません。

フォームが有効でない場合、ユーザーが別のタブに移動できないようにするにはどうすればよいですか?

ところで、検証は正常に機能します-無効なフィールドは適切に強調表示されます。

更新 - onNext 関数をコーディングする

onNext: function (tab, navigation, index) {
            console.log('in on next');

            if (!form.valid()) {
                console.log('not valid');
                $('.error').first().focus();
                return false;
            }

            var total = navigation.find('li').length;
            var current = index + 1;
            // set wizard title
            $('.step-title', form).text('Step ' + (index + 1) + ' of ' + total);
            // set done steps
            jQuery('li', form).removeClass("done");
            var li_list = navigation.find('li');
            for (var i = 0; i < index; i++) {
                jQuery(li_list[i]).addClass("done");
            }

            if (current == 1) {
                form.find('.button-previous').hide();
            } else {
                form.find('.button-previous').show();
            }

            if (current >= total) {
                form.find('.button-next').hide();
                form.find('.button-submit').show();
            } else {
                form.find('.button-next').show();
                form.find('.button-submit').hide();
            }

            App.scrollTo($('.page-title'));
        },

score 1 · Accepted Answer

私の目標: 現在のステップのいずれかのフィールドが有効でない場合、ウィザードが次のタブに移動しないようにします。ユーザーがすべての無効なフィールドを修正できるようにしてから、次のステップに進みます。

onNext関数を次のように変更しました。

onNext: function (tab, navigation, index) {
            console.log('in on next');

            var allowStep = form.valid();

            if (allowStep) {

                var total = navigation.find('li').length;
                var current = index + 1;
                // set wizard title
                $('.step-title', form).text('Step ' + (index + 1) + ' of ' + total);
                // set done steps
                jQuery('li', form).removeClass("done");
                var li_list = navigation.find('li');
                for (var i = 0; i < index; i++) {
                    jQuery(li_list[i]).addClass("done");
                }

                if (current == 1) {
                    form.find('.button-previous').hide();
                } else {
                    form.find('.button-previous').show();
                }

                if (current >= total) {
                    form.find('.button-next').hide();
                    form.find('.button-submit').show();
                } else {
                    form.find('.button-next').show();
                    form.find('.button-submit').hide();
                }

                App.scrollTo($('.page-title'));
            }

            return allowStep;
        },

まだ、if ステートメントの内部から false を返しても同じ効果が得られなかった理由はわかりません。

これを機能させるには、ユーザーを転送するウィザードフォームを停止します。return ステートメントを括弧の外に配置する必要がありました。

これが、他の人が私にかかった開発の時間を節約するのに役立つことを願っています:)

score 0 · Accepted Answer

フォームフィールドのサブセット、つまり現在のタブのフィールドが有効であることを確認する必要があると思います。

valid() プラグインメソッドを使用できますが、それをフォームフィールドのコレクションに適用します。フォームフィールドがフォームに含まれている限り、これは機能します。たとえば、すべてのフィールドが

<form>
<div id="tab1">
 ...form fields here
</div>
...other tabs here
</form>

これを呼び出す

var result = $('div#tab1 :input').valid()

結果は 1 または 0 のいずれかになります。1 は有効です 0 は無効です

score 0 · Accepted Answer

ここでは、現在のステップを取得し、すべての入力を見つけてから、ステップ内の入力をループして、それぞれが有効か無効かを判断します。その後、エラーが発生した場合に戻ります。

フラグ「hadError」を使用せず、有効/無効を返すだけの場合、各フィールドで検証チェックが停止します。無効なフィールドが複数存在する場合がありますが、最初に見つかったフィールドについてのみ、ユーザーに表示されるエラーメッセージが更新されます。そのため、すべての無効な入力にエラーメッセージが表示されるようにフラグを作成しました。そのため、それらをループして個別にチェックし、個々のステップベースで有効/無効である場合に他のステップを実行できます。

                var tabs = $(".tab-pane"); // get the steps
                var currentTab = tabs[index - 1]; //get the current step

                var inputs = $(":input"); // get all the form inputs
                var stepElements = $(currentTab).find(inputs); // get inputs for current step
                var count = stepElements.length; // check that there are inputs
                if (count <= 0) {                // if there are not no reason to loop them 
                    return true;                 // this can be used to perform other action if there are no steps 
                }
                $(stepElements).each(function (idx) {
                    isValid = $(document.forms[0]).validate().element($(this)); // check that the input is valid. This can also be used on a per input basis to perform another action if the field is not valid. 
                    if (!isValid) { hadError = true; } // set our flag if there was an error 

                });

                return !hadError; //return the value of the flag.

注: これは入力でのみ機能し、選択では機能しません。行を変更してみてください

                var inputs = $(":input"); // get all the form inputs

含めるには選択

                var inputs = $(":input, select"); // get all the form inputs and selects

jquery - Twitter Bootstrap Form Wizard/Jquery.validate - フォームが有効でない場合、ユーザーが次のタブに移動できないようにする

3 に答える 3

Related

Reference