-2

我到处搜索，但似乎找不到解决方案。我正在尝试创建一个表单，其中它有 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

在单击按钮而不输入任何信息时，我被困在表单通过验证的地方。我怎样才能完成这个问题？

4

1 回答 1

1

你的代码确实比我想在这里使用的要多，但我会指出你的一些错误并提供一个简单的演示。

  • 关于你的if($('#contactInfoForm').validate(线。 .validate()是插件的初始化，而不是用来测试表单有效性的方法。相反，.validate()应该在 DOM 就绪事件处理程序中调用一次。然后，一旦初始化，表单就会使用其各种内置事件处理程序自动进行测试。也可以使用该.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
        }
    });

});
于 2013-04-02T00:48:41.697 回答