15

問題を明確に説明しなかった場合は申し訳ありません。

  1. ユーザー入力用の複数のテーブルを持つフォームがあります。
  2. nextユーザーをガイドするために、ボタンを使用しbackてさまざまなテーブルを表示および非表示にします。

nextここで問題は次のとおりです。ボタンを使用して現在アクティブなテーブル入力を検証するにはどうすればよいですか。たとえば、ユーザーがクリックするたびに、nextすべてのフィールドが入力されているかどうかがチェックされますか？

これが壊れたデモです。コメントありがとうございます！

HTML

<form method="post" id="form1" action=index.html>
    <table>
        <H4 align="center" id="id_tab">
            |<a href="#" class="Chemical"> Chemical </a>|
             <a href="#" class="Crop"> Crop </a>|
             <a href="#" class="Physical"> Physical </a>|
            </H4>
    </table><br>
    <table class="tab tab_Chemical" border="0">
        <tr>
            <th><label for="id_wat_hl">Water Column Half life (days):</label></th>
            <td><input type="text" name="wat_hl" id="id_wat_hl" /></td>
        </tr>
    </table>
    <table class="tab tab_Crop" border="0" style="display:none">
        <tr>
            <th><label for="id_zero_height_ref">Zero Height Reference:</label></th>
            <td><input type="text" name="zero_height_ref" id="id_zero_height_ref" /></td>
        </tr>
    </table>
    <table class="tab tab_Physical" border="0" style="display:none">
        <tr>
            <th><label for="id_mas_tras_cof">Mass Transfer Coefficient (m/s):</label></th>
            <td><input type="text" name="mas_tras_cof" id="id_mas_tras_cof" /></td>
        </tr>
    </table>
    <table align="center">
        <tr>
            <td><input class="back" type="button" value="Back" /></td>
            <td><input class="next" type="button" value="Next" /></td>
            <td><input class="submit" type="submit" value="Submit" /></td>
        </tr>
    </table>
</form>

JS

$(document).ready(function() {
    var tab_pool = ["tab_Chemical", "tab_Crop", "tab_Physical"];
    var visible = $(".tab:visible").attr('class').split(" ")[1];
    var curr_ind = $.inArray(visible, tab_pool);
    $(".submit").hide();
    $(".back").hide();

    $('.next').click(function() {
        if (curr_ind < 2) {
            $(".tab:visible").hide();
            curr_ind = curr_ind + 1;
            $("." + tab_pool[curr_ind]).show();
            $(".submit").hide();
            $(".back").show();
        }
        if (curr_ind == 2) {
            $(".submit").show();
            $(".next").hide();
        }
    });

    $('.back').click(function() {
        if (curr_ind > 0) {
            $(".tab:visible").hide();
            curr_ind = curr_ind - 1;
            $("." + tab_pool[curr_ind]).show();
            $(".submit").hide();
            $(".next").show();
        }
        if (curr_ind == 0) {
            $(".back").hide();
        }
    });
    $(".next").click(function() {
        $(".tab tab_Chemical").validate({
            rules: {
                wat_hl: "required"
            }
        })
    })
    $(".next").click(function() {
        $(".tab tab_Crop").validate({
            rules: {
                zero_height_ref: "required"
            }
        })
    })
    $(".next").click(function() {
        $(".tab tab_Physical").validate({
            rules: {
                mas_tras_cof: "required"
            }
        })
    })
});
4

4 に答える 4

17

フォームを使用して検証を追加します

var validator = $('form').validate({
    ignore: 'input[type="button"],input[type="submit"]',
    rules: {
        wat_hl: {
            required: true
        },
        zero_height_ref: {
            required : true
        },
        mas_tras_cof: {
            required: true
        }
    }
});

次にnextハンドラーで

$('.next').click(function () {
    var tab = $(".tab:visible");

    var valid = true;
    $('input', tab).each(function(i, v){
        valid = validator.element(v) && valid;
    });

    if(!valid){
        return;
    }

    if (curr_ind < 2) {
        $(".tab:visible").hide();
        curr_ind = curr_ind + 1;
        $("." + tab_pool[curr_ind]).show();
        $(".submit").hide();
        $(".back").show();
    }
    if (curr_ind == 2) {
        $(".submit").show();
        $(".next").hide();
    }
});

デモ：フィドル

説明

  1. var valid = true：反復プロセスを通じてタブの状態を維持するためのフラグ
  2. $（'input'、tab）.each：現在のタブの各入力要素を反復処理します
  3. validator.element（v）は、タブ内の各要素を検証します
  4. valid = validator.element(v) && valid：タブの状態を更新します
于 2013-02-28T03:23:33.133 に答える
4

これはどうですか ？

var isOpenedTabValid = $(".tab:visible :input").valid();
于 2015-07-28T19:24:08.613 に答える
2

これと同じ結果を得る実装があります。role="form"パラメーターでdiv要素を追加しました。次に、メインフォームがまだラップアラウンドしている間に、フォームのように各divの要素を検証します。

<form action="#" id="myForm" role="form" data-toggle="validator" method="post">

    <div id="form-step-0" role="form" data-toggle="validator"><!-- Input elemets --></div>
    <div id="form-step-1" role="form" data-toggle="validator"><!-- Input elemets --></div>
    <div id="form-step-2" role="form" data-toggle="validator"><!-- Input elemets --></div>

</form>

そして、特定のdivにエラーがあるかどうかを確認するためのこのjQueryコード

var elmForm = $("#form-step-0");
elmForm.validator('validate');

次のコードは、特定のdivでエラー入力が発生したかどうかを確認します

var elmErr = elmForm.children('.has-error');
if(elmErr && elmErr.length > 0){
    // Error elements found, Form validation failed
    return false;    
}

フォーム全体を検証する場合は、通常のコードを使用してください

var elmForm = $("#myForm");
elmForm.validator('validate'); 
var elmErr = elmForm.find('.has-error');
if(elmErr && elmErr.length > 0){
    alert('Oops we still have error in the form');
    return false;    
}else{
    alert('Great! we are ready to submit form');
    elmForm.submit();
    return false;
}

これがGitHubのソースファイルです
これがデモの実装です

于 2016-11-17T06:54:26.250 に答える
1

次のボタンがクリックされるたびに、各テーブルの検証メソッドを呼び出しています。代わりに、テーブルが表示されている場合にのみvalidateを呼び出します。curr_indでどのテーブルを表示するかをすでに追跡しているので、それを使用して検証するテーブルを確認し、表示されているテーブルに対してのみvalidateを呼び出すことをお勧めします。

于 2013-02-28T03:08:26.927 に答える