javascript - 如何使用 JavaScript 验证表单输入

Question

我有一个包含 10 多个输入/选择选项的表单，但我希望在填写了 4 个字段时显示该表单的大部分输入。

我做了一些研究并发现

$('input[type="text"]').each(function(){
  // do my things here...
});

但这有两个问题:

1. 当我填写输入时它不起作用
2. 我的字段之一是选择选项，此处仅尝试获取输入

代码

$(function() {
  // show choices DIV only if all fields are filled.
  $('input[type="text"]').each(function() {
    if ($(this).val() != "") {
      $('.choices').show();
    } else {
      $('.choices').hide();
    }
  });
});

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />


<form action="" method="POST">
  <div class="row">
    <div class="col-md-3">
      <div class="form-group">
        <div class="sm-form-design">
          <input id="seq_no" type="text" class="form-control" name="seq_no" required>
          <label for="seq_no" class="control-label">Seq No.</label>
        </div>
      </div>
    </div>
    <div class="col-md-9">
      <div class="form-group">
        <div class="sm-form-design">
          <input id="question" type="text" class="form-control" name="question" required>
          <label for="question" class="control-label">Question</label>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 sm-form-design">
      <select name="type" id="type" class="form-control">
        <option value="dropdown">Dropdown</option>
        <option value="multiple">Multiple</option>
        <option value="radio">Radio Buttons</option>
        <option value="input">Input</option>
      </select>
      <label for="type" class="control-label">Type</label>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <div class="sm-form-design">
          <input type="text" name="quiz_time" class="form-control" id="masked-input-time" required>
          <label for="quiz_time" class="control-label">Time *</label>
        </div>
      </div>
    </div>
  </div>

  <!-- show this part when all fields above are filled -->
  <div class="row choices">
    <div class="col-md-12">
      <h5>Choices:</h5>
    </div>
  </div>
  </div>

  <button type="submit" class="btn btn-primary">Save</button>
</form>

问题

如何在显示表单的其余部分之前验证所有前 4 个字段？

有什么想法吗？

Answer 1

虽然 Shiladitya 的答案有效，并且最接近您自己的代码，但我发现通过在输入发生时将数据序列化到对象中来处理表单会更干净。这使您可以更轻松地推理验证，因为您只需验证对象，而不是 DOM 元素。

这是一个简化的示例:

$(function() {
  const formData = {}
  const $form = $('#form-a')
  const $partTwo = $('#part-2')
  
  // some real validation here
  const isValidPartOne = data =>
    data.a && data.b && data.c
  
  const showPartTwo = () => $partTwo.show()

  $form.on('input', ({target}) => {
    formData[target.name] = target.value
    
    // form data is available at all times
    console.log('formData =', formData)

    if (isValidPartOne(formData)) {
      showPartTwo()
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="form-a">
  <div id="part-1">
    PART 1
    <input name="a" />
    <input name="b" />
    <select name="c">
      <option value="" disabled selected>Choose One</option>
      <option value="a">A</option>
      <option value="b">B</option>
    </select>
  </div>
  
  <div id="part-2" style="display:none;">
    PART 2
    <input name="d" />
  </div>

</form>