jquery - Jquery onkeyupで入力フィールドを検証し、ボタンがクリックされた場合に機能を実行します

Question

どこでも検索しましたが、解決策が見つからないようです。一度に 1 つのフィールドセットしか表示されない 3 つのフィールドセットを持つフォームを作成しようとしています。次のように見えるように、onkeyup検証が機能しています。

$("#contactInfoForm").validate({
        debug:true,
        onkeyup: false,
        rules: {
        firstName: {
           required: true,
           loginRegex: true,
           minlength: 2
        },
        lastName: {
            required: true,
            minlength: 2
        },
        Email:{
            required: true,
            email: true
        },
        Email_confirm:{
            required: true,
            email: true,
            equalTo: "#Email"
        },
        streetAddressBilling:{
            required: true,
            minlength: 3
        },
        billingCity:{
            required: true,
            digits: true,
            minlength: 3
        },
        state:{
            required: true
        },
        zip:{
            required: true,
            digits: true,
            minlength: 3
        },
        phone:{
            required: true,
            digits: true,
            minlength: 3,
            phoneUS: true,
        },
        prefix:{
            required: true,
            digits: true,
            minlength: 3
        },
        landline:{
            required: true,
            digits: true,
            minlength: 4
        }
    },//end of rules
        groups: {
        DateofBirth: "phone prefix landline"
    },
            errorPlacement: function(error, element) {
        if (element.attr("name") == "phone" || element.attr("name") == "prefix" || element.attr("name") == "landline") 
            error.insertAfter("#landline");
        else 
            error.insertAfter(element);
    },
        messages:{
        firstName: {
            required: "Please enter first name",
            lettersonly: "No numbers please",
            loginRegex: "Login format not valid",
            minlength: "Use at least 2 letters"
        },
        lastName: {
            required: "Please enter last name",
            lettersonly: "No numbers please",
            minlength: "Use at least 2 letters"
        },
        Email: {
            required: "Please enter your email",
            email: "Please enter a valid email address"
        },
        Email_confirm: {
            required: "Please enter your email",
            email: "Please enter a valid email address",
            equalTo: "Email addresses do not match"
        },
        streetAddressBilling:{
            required: "Please enter your street address",
                minlength: "Use at least 3 letters"
        },
        billingCity:{
            required: "Please enter your city",
            minlength: "Use at least 3 letters"
        },
        state:{
            required: "Please select your state."
        },
        zip:{
            required: "Please enter your zip code",
            digits: "Please only use numbers",
            minlength: "Use at least 5 letters"
        },
        phone:{
            required: "Please enter your phone number",
            digits: "Please only use numbers",
            minlength: "Use 3 numbers"
        },
        prefix:{
            required: "Please enter your phone number",
            digits: "Please only use numbers",
            minlength: "Use 3 numbers"
        },
        landline:{
            required: "Please enter your phone number",
            digits: "Please only use numbers",
            minlength: "Use 4 numbers"
        }
    }//end of messages  
    });//end of contact info form validation rules

次にやろうとしているのは、各フィールドセットの最後に続行ボタンを配置することです。ボタンはそのフィールドセットのフォームをチェックし、検証された場合は次のフィールドセットを開きます。以下は、フィールドセットの HTML です。

        <form onsubmit="return submitForm(this)" method="post" id="contactInfoForm" name="contactInfoForm" action="#">
      <fieldset>
        <legend class="accessible-text">Address</legend>
        <ol>
          <li class="fullInput">
            <label id="caption_address1" for="address1">
              Address
            </label>
            <input type="text" autocomplete="off" aria-required="true" placeholder="Street Address" class="fullInput" maxlength="30" id="address1" name="address1">
          </li>
          <li class="no-label fullInput">
            <label class="accessible-text" id="caption_address2" for="address2">
              Billing Address Line 2
            </label>
            <input type="text" maxlength="40" autocomplete="off" aria-required="false" placeholder="Street Address Line 2(Optional)" class="fullInput" id="address2" name="address2">
          </li>
          <li class="no-label">
            <label class="accessible-text" id="caption_city" for="city">
              City
            </label>
            <input type="text" aria-required="true" placeholder="City" maxlength="30" id="city" name="city">
          </li>
          <li class="no-label">
            <label class="accessible-text" id="caption_state" for="state">
              State
            </label>
            <select aria-required="true" class="required" name="state" id="state">
              <option value="">State</option>
            </select>
          </li>
          <li class="no-label">
            <label class="accessible-text" id="caption_zipCode" for="zipCode">
              ZIP
            </label>
            <input type="text" autocomplete="off" aria-required="true" placeholder="20151" name="zipCode" id="zipCode" maxlength="5">
          </li>
          <li>
            <label class="fullInput" id="caption_phone" for="phone">
              Main Contact Number <a href="">Why we need this</a><br>
              <span class="accessible-text">Please enter your area code</span>
            </label>
            <input type="text" autocomplete="off" aria-required="true" placeholder="703" name="phone" id="phone" maxlength="3">
            <label class="accessible-text" id="caption_prefix" for="prefix">
              Enter the next 3 numbers
            </label>
            <input type="text" autocomplete="off" aria-required="true" placeholder="555" name="prefix" id="prefix" maxlength="3">
            <label class="accessible-text" id="caption_landline" for="landline">
              Enter the last 4 numbers
            </label>
            <input type="text" autocomplete="off" aria-required="true" placeholder="5555" name="landline" id="landline" maxlength="4">
          </li>
        </ol>
      </fieldset>
    </form>

ボタンの JS は次のとおりです。フェードには jquery ui を使用しています。

$("#button").on("click", function(event){
    if($('#contactInfoForm').validate({
    rules: {
        firstName: {
           required: true,
           loginRegex: true,
           minlength: 2
        },
        lastName: {
            required: true,
            minlength: 2
        },
        Email:{
            required: true,
            email: true
        },
        Email_confirm:{
            required: true,
            email: true,
            equalTo: "#Email"
        },
        streetAddressBilling:{
            required: true,
            minlength: 3
        },
        billingCity:{
            required: true,
            digits: true,
            minlength: 3
        },
        state:{
            required: true
        },
        zip:{
            required: true,
            digits: true,
            minlength: 3
        },
        phone:{
            required: true,
            digits: true,
            minlength: 3,
            phoneUS: true,
        },
        prefix:{
            required: true,
            digits: true,
            minlength: 3
        },
        landline:{
            required: true,
            digits: true,
            minlength: 4
        }
    },//end of rules
    }))
{ //checks if it's valid
        if($(this).valid()) {
            $('#about_you_ver2').toggleClass("mod");
            $('#nameFieldsetEdit').toggleClass("hide");
            $('#name').fadeOut('xslow', function(){
                //$(this).effect("highlight", {}, 2000);
            }),
            $('#billing_address').fadeIn('xslow', function(){
                //$(this).effect("highlight", {}, 2000);
            }),
            $('#billing_container p').fadeIn('xslow', function(){
                //$(this).effect("highlight", {}, 2000);
            })
        }//end of valid direction
    }
    else{
        alert("I'm not valid");
    }
});//end of onclick for button

情報を入力せずにボタンをクリックすると、フォームが検証に合格した時点で立ち往生しています。この問題を解決するにはどうすればよいですか?

Answer 1

ここで作業したいコードよりも多くのコードがありますが、間違いのいくつかを指摘し、簡単なデモを提供します。

• あなたのif($('#contactInfoForm').validate(ラインについて。 フォームの有効性をテストするために呼び出すメソッドではなく、.validate()プラグインの初期化です。代わりに、DOM 準備完了イベント ハンドラー内で1 回.validate()呼び出す必要があります。次に、フォームが初期化されると、さまざまな組み込みイベント ハンドラーを使用してフォームが自動的にテストされます。フォームは、メソッドを使用してプログラムでテストすることもできます。.valid()

• clickハンドラーは必要ありません。ボタンのclickイベントは、プラグインによって自動的にキャプチャされます。submit

• インラインonsubmit="return submitForm(this)"コードについて。jQuery はすべてのインライン JavaScript を廃止します。それだけでなく、プラグインに完全に適切な組み込み済みの が既にあるonsubmit場合にを使用しても意味がありません。.validate()submitHandler

• onkeyup: falseライブ キーストロークの検証を無効にします。デフォルトでは、プラグインはキーストロークごとに検証するため、初期化からオプションを除外して、機能を有効に保ちます。

検証を使用して複数ステップのフォームを構成する方法を次に示します。

1) それぞれ<fieldset>を独自の<form>タグのセット内に配置します。

2).validate()それぞれで個別に初期化します<form>。このようにして、独自の.validate()初期化関数内で各ステップのルールを論理的に編成することもできます。

3) のsubmitHandler各インスタンス内でコールバックを使用し.validate()て、検証が成功したときに特定のステップを非表示にし、次のフォームを表示します。が有効な場合にsubmitHandlerのみ発生するformため、条件付きコードの多くが廃止されます。

動作デモ: http://jsfiddle.net/wqjnn/

HTML :

<form id="myform1">
    <h1>Step 1</h1>
    <input type="text" name="field1" />
    <input type="submit" value="go to step 2" />
</form>

<form id="myform2">
    <h1>Step 2</h1>
    <input type="text" name="field2" />
    <input type="submit" value="go to step 3" />
</form>

<form id="myform3">
    <h1>Step 3</h1>
    <input type="text" name="field3" />
    <input type="submit" />
</form>

jQuery :

$(document).ready(function () {

    $('#myform1').validate({
        // your rules for step 1 fields,
        submitHandler: function (form) {
            $(form).hide(function () { // hide this step
                $('#myform2').show();  // show step 2
            });
            return false;
        }
    });

    $('#myform2').validate({
        // your rules for step 2 fields,
        submitHandler: function (form) { 
            $(form).hide(function () { // hide this step
                $('#myform3').show();  // show step 3
            });
            return false;
        }
    });

    $('#myform3').validate({
        // your rules for step 3 fields,
        submitHandler: function (form) {
            var data1 = $('#myform1').serialize();
            var data2 = $('#myform2').serialize();
            var data3 = $(form).serialize();
            var data = data1 + "&" + data2 + "&" + data3; // concatenate data from all forms
            // alert(data);
            // your ajax?
            return false; // to block normal form submit if needed
        }
    });

});