Javascript jQuery和输入表单

我用名字和文字制作了这个输入表单

<form action="" method="post" class="main">
    <label>Write a comment!</label><br>
    <input placeholder="Name" class="form-text" name="user" type = "text" id = "user" autofocus size = "48"><br/>
    <textarea class="form-text" name="comment" id="comment" placeholder="Text"></textarea>
    <br />
    <input type="submit" class="form-submit" name="new_comment" value="Submit comment">
</form>

现在我来解决这个问题。我希望用户填写这两个字段以编写注释（

name&text

）。对于任何空字段，我要添加类

“表单文本错误”

。除了具有用户名的字段外，其他一切都正常工作

---

有什么建议吗？

使用

Length

获取

输入的长度

，如果返回零，则执行

addClass

$（“.form submit”）。单击（函数（）{
var commentBox=$（“#注释”）；
var userBox=$（“#用户”）；
var commentCheck=commentBox.val（）；
var userCheck=userBox.val（）；
if（commentCheck.length返回时为false，这是由于条件导致的，因此它将检查第一个条件，而不返回进一步的检查。
需要做出如下相应的更改

$(".form-submit").click(function() {
    var commentBox = $("#comment");
    var userBox = $("#user");

    var commentCheck = commentBox.val();
    var userCheck = userBox.val();
    var err = false;


    if(commentCheck == '' || commentCheck == NULL ) {
        commentBox.addClass("form-text-error");
        console.log(commentBox);
        err = true;
    }   

    if (userCheck == '' || userCheck == NULL){
        userBox.addClass("form-text-error");
        console.log(userBox);
        err = true;
    }
if(err)
return false;


});

您在评论后返回false

if(commentCheck == '' || commentCheck == NULL ) {
        commentBox.addClass("form-text-error");
        console.log(commentBox);
        return false;
    } 

这就是为什么它没有得到名称字段
你可以按照你的要求用这个

var commentBox = $("#comment");
var userBox = $("#user");
var commentCheck = commentBox.val();
var userCheck = userBox.val();
var flag =0;
if(commentCheck == '' || commentCheck == NULL ) {
    $("#comment").addClass("form-text-error");
    console.log(commentBox);
    flag = 1;
}   
if (userCheck == '' || userCheck == NULL){
    $("#user").addClass("form-text-error");
    console.log(userBox);
    flag = 1;
}
if(flag == 1)return false;  

两次验证都返回false。
另外，使用
.length==0 | |！box
。
一个共同的功能会有所帮助

固定的

使用
e.preventDefault（）；
这也将验证用户名字段，如果为空则不会提交


var commentBox=$（“#comment”）；
var userBox=$（“#用户”）；
函数checkIfEmpty（框，复选框）{
如果（选中.length==0 | |！框）{
addClass（“表单文本错误”）；
控制台日志（框）；
返回true；
}否则{
removeClass（“表单文本错误”）；
返回false；
}
}
$（“.form submit”）。在（'click'，函数（e）{
e、 预防默认值（）；
var commentCheck=commentBox.val（）；
var userCheck=userBox.val（）；
var commentCall=checkIfEmpty（commentBox，commentCheck）；
var userCall=checkIfEmpty（userBox，userCheck）；
if（userCall==true&&commentCall==true）{
返回false；
}
});

。表单文本错误{
背景色：红色；
}

写评论！






“我希望用户填写这两个字段以便写评论”您没有两个字段可以填写以允许评论，您只有一个用户名和一个评论字段。或者您的意思是“为了发布…”仍然会发生同样的事情。好的，抱歉，我没有正确检查代码。现在它可以正常工作了，我设法将form error类添加到两个字段中，但无论如何，即使一个字段为空，我也可以发送表单。感谢您的代码，但现在我可以发送两个字段均为空的表单：D@TomsEglite
返回false
原因。请尝试我重写的code，并让我知道结果。这是@Komal建议我做的相同解决方案。现在，如果两个字段都为空，我可以向它们添加一个类，但即使其中一个字段为空，我仍然可以发送表单。然后使用此代码段，对于任何空输入字段，它都将返回false..var commentBox=$（“#comment”）；var userBox=$（“#user”）；var commentCheck=commentBox.val（）；var userCheck=userBox.val（）；var flag=0；var flag1=0；if（commentCheck=''| | | commentCheck==NULL）{$（“#comment”）.addClass（“表单文本错误”）；console.log（commentBox）；flag=1；}if（userCheck=''| | userCheck==NULL）{$（“#user”）.addClass（“表单文本错误”）；console.log（userBox）；flag1=1；}if（flag==1 | | flag1==1）返回false；即使在这段代码之后，即使只有一个空字段，我仍然可以发送表单。这真是麻烦：DIt添加了文本错误类，但我仍然可以在一个空字段的情况下将输入发送到我的db。我开始认为在其他地方可能存在问题。修复了代码。现在，如果名称字段为空，表单将不会提交。是否复制在代码中，它会得到以下错误：
uncaughttypeerror:无法读取HTMLInputElement的checkIfEmpty（global.js:14）处未定义的属性'length'（global.js:29）HTMLInputElement.dispatch（jquery.min.js:3）处HTMLInputElement.r.handle（jquery.min.js:3）
代码段工作正常。我认为它与变量范围有关。请尝试将
var commentBox=$（“#comment”）；var userBox=$（“#user”）；
变量声明为全局变量。
var commentBox = $("#comment");
var userBox = $("#user");
var commentCheck = commentBox.val();
var userCheck = userBox.val();
var flag =0;
if(commentCheck == '' || commentCheck == NULL ) {
    $("#comment").addClass("form-text-error");
    console.log(commentBox);
    flag = 1;
}   
if (userCheck == '' || userCheck == NULL){
    $("#user").addClass("form-text-error");
    console.log(userBox);
    flag = 1;
}
if(flag == 1)return false;  

Use input type="button" and use this snippet that's tested and it works...
$("#comment").removeClass("form-text-error");
        $("#user").removeClass("form-text-error");
        var commentBox = $("#comment");
        var userBox = $("#user");
        var commentCheck = commentBox.val();
        var userCheck = userBox.val();
        var flag =0;
        var flag1 =0;
        if(commentCheck == '' || commentCheck == null ) {
            $("#comment").addClass("form-text-error");
            console.log(commentBox);
            flag = 1;
        }   
        if (userCheck == '' || userCheck == null){
            $("#user").addClass("form-text-error");
            console.log(userBox);
            flag1 = 1;
        }
        if(flag == 1 || flag1 == 1){return false;}
        else{return true;}