驗證表單不在空輸入框上提交

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來使用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

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> 

這將使你，直到有數據禁用提交按鈕在輸入字段內。