验证表单以免在空的输入框中提交

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;
     }
  });
});

我有一个程序，如果用户单击一个按钮，则会附加更多写入数据框。 除非所有写数据框均已填写，否则我不希望提交表单。 如果输入不完整，上面的代码片段将显示警报框，但是当您按OK时，表单仍然提交？

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.preventDefault()事件中的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 
     }
  });
});

演示版

Answer 2

$('#write').click(() => {

 // if any one of the inputs is blank canSubmit will end up as false
 // if all are not blank, it will end up as true
  var canSubmit = [...document.querySelectorAll('input')]
    .reduce((acc, input) => acc = input.value === '' ? false : acc , true)

});

Answer 3

<script type="text/javascript">
$(function () {
    $("#data").bind("change keyup", function () {      
     if ($("#data").val() != "")
          $(this).closest("form").find(":submit").removeAttr("disabled");
     else
          $(this).closest("form").find(":submit").attr("disabled", "disabled");      
     })
});
</script>

这将允许您禁用提交按钮，直到输入字段中有数据为止。