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.preventDefault()来e。在这种情况下，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

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>

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

验证表单不在空输入框上提交

3 个答案: