防止輸入在空（非形式）時提交

Question

我有一些流氓輸入和提交按鈕，在列表中添加新項目，我想阻止它們在沒有任何內容時可提交。 它們看起來像這樣：

<input name="name" placeholder="Application Name">
<button type="submit">Add App</button>

我有一堆他們，我​​想知道是否有某種方式我可以讓他們所有人不要提交他們什么都沒有。 謝謝！

Answer 1

是的，只需添加必需的屬性即可。

<input name="name" placeholder="Application Name" required>

Answer 2

有兩種解決方案......

1. 解決方案是required設置HTML5屬性

2. 解決方案是在表單上設置函數，所以在提交時，函數將被處理並return false; 會阻止提交：

<form action="" method="post" onSubmit="checkInputs();return false;" id="form">

然后你可以瀏覽每一個輸入：

$('#form input').each(function() {

最后，您將檢查，如果是輸入text類型，如果是空的：

if( type == 'text' && value.length == 0 )

這是FIDDLE DEMO

Answer 3

1. Internet Explorer 9及更早版本或Safari中不支持“required”屬性。
2. 在表單中包含輸入和按鈕，並在提交時驗證表單。

HTML代碼：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<form name="app_form" id="app">
    <input name="name" id="name" placeholder="Application Name">
    <button type="submit">Add App</button>
</form>

JS代碼：

$("#app").submit(function(event) {
    if (!$("#app #name").val()) {
        alert("Please enter Application Name.");
        event.preventDefault();  // this will prevent form submission
});