-1

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

目前，它添加到所有输入；我只想要空的输入/文本区域。任何人都可以帮忙吗？

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

4 回答 4

4

试试这个：

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

jFiddle 示例

（注意 preventDefault 在那里，所以表单不会提交，你可以看到它工作）

于 2013-03-18T21:01:21.467 回答
0

.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");
    }
});
于 2013-03-18T20:52:58.667 回答
0

如果您以后真的想提交表格（采用接受的答案）。试试这个：

$("#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" />
于 2013-03-18T20:54:34.217 回答
0

为了避免对必填字段进行自定义验证，请使用https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.js。在刀片中添加这个库（在 javascript 部分的开头）。使用这个库，如果未填写必填字段，提交表单上会出现一个弹出窗口。验证将适用于所有“必需”数据类型。供参考：https ://jqueryvalidation.org/ 。这种方法对我有用。

于 2021-09-27T15:41:47.513 回答