javascript - 验证表单不在空输入框中提交

Question

// html
<label>Write Data:</label>
</br>
<input type=text id=data name="data"style="width: 14em;"> 
</br> 
</br>
<button id="write" type="submit" formaction="/output4" formmethod="post" style="width: 5em;">Write</button>
<button id="More" type="submit">Add more Parameters</button>

// js
$('#write').click(function(){
  $('#data').each(function() {
    if ($(this).val() == "" || $(this).val() == null) {
      alert("Write Data must be filled out or Remove empty parameter list!");
       return false;
     }
  });
});

我有一个程序，如果用户单击按钮，则会附加更多写入数据框。除非填写了所有写入数据框，否则我不想提交表单。如果输入不完整，上面的代码片段会显示警告框，但当您按“确定”时，表单仍然会提交？

Answer 1

您可以使用.submit()事件处理程序。然后使用 return false 或 e.preventDefault() 停止提交。另请注意，id 是唯一的，因此 $('#data') 将只是单个元素，因此 .each()不需要:

$('#formIDHere').submit(function(e){
    if ($('#data').val() == "" || $('#data').val() == null) {
       alert("Write Data must be filled out or Remove empty parameter list!");
       e.preventDefault(); // or `return false`
     }
});

<小时/>

对于许多输入，您的输入项都是一个值为 class="data" 的类。请注意，您需要使用提交事件中的 e 来使用 e.preventDefault() 。在这种情况下，return false 适用于 .each()，而不是 submit。我在这里使用它来阻止 .each 运行，这样我们就不会收到许多不需要的警报和检查:

$('#myForm').submit(function(e){
  $('.data').each(function(){
    if ($(this).val() == "" || $(this).val() == null) {
       alert("Write Data must be filled out or Remove empty parameter list!");
       e.preventDefault(); // This is the preventDefault of submit
       return false; // This stops the .each from continuing 
     }
  });
});

Demo