防止输入为空时提交（不在表单中）答案

【问题标题】：prevent input from submitting when empty (not in form)防止输入为空时提交（不在表单中）
【发布时间】：2014-05-22 14:25:29
【问题描述】：

我有一些流氓输入和提交按钮，可以在列表中添加新项目，我想防止它们在它们没有任何内容时被提交。它们看起来像这样：

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

我有一堆，我想知道是否有某种方法可以让他们在他们一无所有时不提交。谢谢！

【问题讨论】：

标签： jquery html validation input

【解决方案1】：

是的，只需添加所需的属性即可。

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

【讨论】：

太好了，谢谢！这适用于所有浏览器吗？
是的，所有现代浏览器。（用caniuse看支持，优秀网站caniuse.com/form-validation）。您还可以设置一个模式，以检查每个示例的值是否是有效的邮件、数字等...

【解决方案2】：

有两种解决方案...

解决办法是设置HTML5属性required
解决方案是在表单上设置函数，所以提交，函数将被处理，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

【讨论】：

【解决方案3】：

Internet Explorer 9 及更早版本或 Safari 不支持“必需”属性。
在表单中包含输入和按钮，并在提交时验证表单。

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

【讨论】：