如何使用 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>

Answer 2

给你一个解决方案

 $(function() { $('.choices').hide(); // show choices DIV only if all fields are filled. $('select').change(function() { validateInput(); }); $('input[type="text"]').keyup(function() { validateInput(); }); function validateInput() { var valid = true; $('input[type="text"], select').each(function() { if ($(this).val() === "") { valid = false; } }); if (valid) { $('.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>

OnChange 任何输入，请遍历所有输入以检查每个输入是否为空或有值。

在这里，您可以为您在评论框中提到的问题 1 提供解决方案

$(function() {

  $('.choices').hide();

  // show choices DIV only if all fields are filled.
  $('select').change(function() {
    validateInput();
  });

  $('input[type="text"]').keyup(function() {
    validateInput();
  });

  // --- Whenever you make an action you can call this method to validate your inputs ----
  function validateInput() {
    var valid = true;
    $('input[type="text"], select').each(function() {
      if ($(this).val() === "") {
        valid = false;
      }
    });

    if (valid) {
      $('.choices').show();
    } else {
      $('.choices').hide();
    }
  }
});

Answer 3

我无法正确测试，但查看您的功能，我会进行以下更改，

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