Question

我正在处理“多步骤”表单。

每个步骤只有一个输入字段和一个NEXT按钮我想进行设置，以便仅当您输入特定文本时该字段才有效。

例如，表单的第一部分有一个用于NAME的输入字段...我希望它在进入下一步之前只接受名称JOHN，否则请给出错误提示。

请帮助我更改或添加任何代码。

对于任何形式的不良英语我深表歉意。预先感谢。

这是我的html代码；

<form>
  <!-- One "tab" for each step in the form: -->
  <div class="tab">First Name:
    <p><input  placeholder="First Name..." ></p>
  </div>
  <div class="tab">Last Name:
    <p><input  placeholder="Last Name..." ></p>
  </div>
  <div class="tab">Contact Info:
    <p><input placeholder="E-mail..." ></p>
  </div>
  <div style="overflow:auto;">
    <div style="float:right;">
      <button type="button" id="nextBtn" ">Next</button>
    </div>
  </div>
</form>

Answer 1

  $("#nextBtn").click(function(){
            var tab = $(".tab:not(.hidden)");
            var input = tab.find("input");
            var checks = {
                "firstname": "John",
                "lastname": "Smith",
                "email": "j.smith@example.com"
            };
            if(input.val() == checks[input.attr("name")]){
                tab.addClass("hidden");
                if(tab.next().length) {
                    tab.next().removeClass("hidden");
                }else{
                    //submit form
                }
            }else{
                alert("wrong input");
            }

        });

 .hidden{
      display:none!important;
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
      <!-- One "tab" for each step in the form: -->
      <div class="tab">First Name:
        <p><input name="firstname" placeholder="First Name..." ></p>
      </div>
      <div class="tab hidden">Last Name:
        <p><input name="lastname" placeholder="Last Name..." ></p>
      </div>
      <div class="tab hidden">Contact Info:
        <p><input name="email" placeholder="E-mail..." ></p>
      </div>
      <div style="overflow:auto;">
        <div style="float:right;">
          <button type="button" id="nextBtn" ">Next</button>
        </div>
      </div>
    </form>

具有特定输入值的多步骤表单

1 个答案: