Question

我正在创建一个带验证的简单表单，并希望任何空输入或textarea都添加了一个类，但我不知道如何检查空输入。

目前，它增加了所有输入;我只想要空输入/ textareas。有人可以帮忙吗？

HTML：

<form id="contactform">
    <input type="text" id="name" placeholder="name" autofocus >
    <input placeholder="email" >
    <textarea placeholder="message" ></textarea>
    <input type="submit">
    </input>
</form>

jQuery的：

$(function () {
    $("#contactform").submit(function () {
        if($("input, textarea").val() === ""){
        $("input").addClass("error");   
        return false;
        }
        $("input").removeClass("error");
    });
});

Answer 1

试试这个：

 $("#contactform").submit(function (e) {
     e.preventDefault();
     $(":input").not("[type=submit]").removeClass('error').each(function () {
         if ($.trim($(this).val()).length == 0) $(this).addClass('error');
     });
 });

<强> jFiddle example

（请注意，preventDefault就在那里，因此表单不会提交，你可以看到它有效）

Answer 2

.val()不返回数字，它返回一个字符串。因此，将$("input, textarea").val() == 0更改为$("input, textarea").val() === ""

修改

根据评论，并且在测试空字段时要更全面一些

$("input, textarea").each(function(){ var self = $(this), thisVal = self.val(); if($.trim(thisVal) === "" || thisVal.length === 0) { self.addClass("error"); } });

Answer 3

如果您确实想在之后提交表单（采用已接受的答案）。试试这个：

$("#submit_form").click(function () {
$submit = "yes";
$(":input").not("[type=button]").removeClass('error').each(function () {
    if ($.trim($(this).val()).length == 0) {
        $(this).addClass('error');
        $submit = "no";
    }
});
if ($submit == "yes") {
    $("#contactform").submit();
}
});

这将通过每一个并验证它有内容，如果没有，它不会允许您提交表单。否则表格将提交。我还将提交按钮更改为按钮。它来自：

 <input type="submit">

使用按钮提交：

 <input type="button" id="submit_form" value="Submit" />

使用jQuery检查输入是否为空？

3 个答案: