如何在每个步骤中验证必填字段？ （也就是说，只有在必填字段有效且不为空时，下一个按钮才有效）

Question

我正在使用 bootstrap 和 jquery 创建一个包含 4 个步骤的多步骤表单。

但我希望在每个步骤中验证必填字段，也就是说，只有在必填字段不为空时，进入下一步的按钮才有效。

但我没有成功实施验证每个步骤所需字段的这一部分。你知道怎么做吗？

工作示例：https://jsfiddle.net/4vzf9qgr/2/

jquery：

$(function(){

  // navigation buttons

  $('a.nav-link').on('show.bs.tab', function (e) {
    var $target = $(e.target);
    if ($target.parent().hasClass('disabled')) {
      e.preventDefault();
    }
  });

  $(".next-step").click(function (e) {
    var $active = $('.nav-pills li a.active');
    $active.parent().next().removeClass('disabled');
    nextTab($active);
  });

  $(".prev-step").click(function (e) {
    var $active = $('.nav-pills li a.active');
    prevTab($active);
  });

  function nextTab(elem) {
    $(elem).parent().next().find('a.nav-link').click();
  }
  function prevTab(elem) {
    $(elem).parent().prev().find('a.nav-link').click();
  }
});

HTML

<div class="bg-light-gray2">
  <div class="container nopadding py-4">
    <div class="row justify-content-center align-items-center">
      <div class="col-12">
        <h1 class="h5 text-center text-heading-blue font-weight-bold">Page Title</h1>
      </div>
    </div>

    <div class="row mt-3 d-flex justify-content-center">
      <div class="col-12">
        <div class="registration_form">
          <ul class="nav nav-pills bg-light-gray registration_form_list" role="tablist">
            <li class="">
              <a class="nav-link active" href="#step1" data-toggle="tab" role="tab">
                Step 1<br><small class="d-none d-md-inline-block">General Info</small></a>
            </li>
            <li class="disabled">
              <a class="nav-link" href="#step2" data-toggle="tab" role="tab">
                Step 2<br><small class="d-none d-md-inline-block">Conference Creator Info</small></a>
            </li>
            <li class="disabled">
              <a class="nav-link" href="#step3" data-toggle="tab" role="tab">
                Step 3<br><small class="d-none d-md-inline-block">Registration Types</small></a>
            </li>
          </ul>

          <form method="post" name="test" class="clearfix" action="/conference/store">
            <div class="tab-content registration_body bg-white" id="myTabContent">
              <div class="tab-pane fade show active clearfix" id="step1" role="tabpanel" aria-labelledby="home-tab">

                <div class="form-group">
                  <label for="conference_name" class="text-heading h6 font-weight-semi-bold">Conference Name</label>
                  <input type="text" required class="form-control" name="conference_name" id="conference_name">
                </div>

                <div class="form-row">
                  <div class="form-group col-lg-6">
                    <label for="conference_categories" class="text-heading h6 font-weight-semi-bold">Categories</label>
                    <select id="tag_list"  multiple class="form-control" name="conference_categories" id="conference_categories">
                      <option>category1</option>
                      <option>category2</option>
                    </select>
                  </div>
                </div>



                <div class="form-group">
                  <label for="textarea" class="text-heading h6 font-weight-semi-bold">Description</label>
                  <textarea class="form-control" name="conference_description" id="textarea" rows="3"></textarea>
                </div>

                <div class="float-right">
                  <button type="button" href="#step2" data-toggle="tab" role="tab"
                          class="btn mr-2 btn-primary btn next-step">
                    Go To Step 2
                  </button>
                </div>

              </div>

              <div class="tab-pane fade clearfix" id="step2" role="tabpanel" aria-labelledby="profile-tab">


                <div class="form-group">
                  <label for="conference_organizer_description" class="text-heading h6 font-weight-semi-bold">Description</label>
                  <textarea name="organizer_description" id="conference_organizer_description" class="form-control" rows="3"></textarea>
                </div>

                <button type="button" href="#step1" data-toggle="tab" role="tab"
                        class="btn mr-2 btn-outline-primary btn prev-step">
                  Back to Step 1
                </button>
                <button type="button" href="#step3" data-toggle="tab" role="tab"
                        class="btn mr-2 btn-primary btn next-step">
                  Go To Step 3
                </button>
              </div>
              <div class="tab-pane clearfix fade" id="step3" role="tabpanel" aria-labelledby="contact-tab">
                <div class="form-group">
                  <label for="registration_type_name" class="text-heading h6 font-weight-semi-bold">Registration Type Name</label>
                  <input type="text" required class="form-control" name="registration_type_name" id="registration_type_name">
                </div>

                <div class="form-group">
                  <label for="registration_type_description" class="text-heading h6 font-weight-semi-bold">Registration Type Description</label>
                  <input type="text" class="form-control" name="registration_type_description" id="registration_type_description">
                </div>

                <button type="button" href="#step2" data-toggle="tab" role="tab"
                        class="btn mr-2 btn-outline-primary btn prev-step">
                  Go Back To Step 2
                </button>
                <button type="submit"
                        class="btn mr-2 btn-primary btn">
                  Store
                </button>

              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

一种方法是使用您拥有的 div ID（“#step1”、“#step2”等）并禁用按钮，除非以下函数返回 true：

function validateForm(divId)
    {
        var inputs, index;
        var form=document.getElementById(formId);
        inputs = form.getElementsByTagName('input');
        for (index = 0; index < inputs.length; ++index) {
            // deal with inputs[index] element.
            if (inputs[index].value==null || inputs[index].value=="")
            {
                alert("Field is empty");
                $(buttonID).prop('disabled', true);
                return
            }
        }
        $(buttonID).prop('disabled', false);
    }

更新/附加 cmets：

我改变了上面的函数来设置按钮而不是返回任何东西。在表单加载时，禁用该按钮。然后添加一个 onfocus attr 来运行这样的事件监听器：

function validateFormListener(divID, formObject) {
    formObject.addEventListener("input", function(evt) {
      validateForm(divID, buttonID)
    })
}

给按钮一个 ID，然后用这个名称替换示例中的 buttonID。将输入标签更改为如下所示：

<input type="text" required class="form-control" onfocus="validateFormListener('#step1', buttonID, this)" name="conference_name" id="conference_name">