Question

我想在使用jquery发布之前检查帖子表单中的文本字段是否为空。如果有的话，我想在文本区域旁边显示错误消息。我单击按钮以空字段提交信息，但没有显示消息。在执行发布之前我需要这个检查功能。这就是我所做的。

<!DOCTYPE html>
    <html>
    <head>
    <script src="jquery-1.7.1.min.js"></script>
    <script>
    function ValidateForm()
    {
        $(document).ready(function(
              {
                  $("#personID").each(function()
                       {
                           if(this.val()=="")
                           {
                                $("#error_msg").html("Field needs filling");
                           }              
                       }      
              }
        ));

    }


    </script>
    </head>
    <body>
    <form action="action.php" method="post" id="personID">
    First Name: <input type="text" name="first"><span id="error_msg"></span></br>
    Last Name: <input type="text" name="last"><span id="error_msg"></span></br>
    Phone: <input type="text" name="phone"><span id="error_msg"></span></br>
    Mobile: <input type="text" name="mobile"></br>
    Position: <input type="text" name "pos"><span id="error_msg"></span></br>
    <input type="button" value="Insert" onclick="ValidateForm">
    </form>
    </body>
    </html>

Answer 1

此...

if(this.val()=="")

应该是这个......

if($(this).val()=="")

或者这......

if(!$(this).val())

或者这......

if(!this.value)

将this（对元素的引用）传递给$函数会返回引用该元素的jQuery对象。

这就是让你能够调用像.val()这样的jQuery方法的东西。

你实际上也有一些混乱的语法。

将您的代码更改为此...

function ValidateForm() {
    if($("#personID").val()=="") {
        $("#error_msg").html("Field needs filling");
    }              
}

不需要$(document).ready()，因为在提交表单之前代码才会运行。

Answer 2

该功能应该是

function ValidateForm()
{
    $('span.error_msg').html('');
   var success = true;
    $("#personID input").each(function()
        {
            if($(this).val()=="")
            {
                $(this).next().html("Field needs filling");
                success = false;
            }
    });
    return success;
}

，您的表单应为

<form action="action.php" method="post" id="personID" onsubmit="return ValidateForm();">
    First Name: <input type="text" name="first"><span class="error_msg"></span></br>
    Last Name: <input type="text" name="last"><span class="error_msg"></span></br>
    Phone: <input type="text" name="phone"><span class="error_msg"></span></br>
    Mobile: <input type="text" name="mobile"></br>
    Position: <input type="text" name "pos"><span class="error_msg"></span></br>
    <input type="submit" value="Insert">
</form>

您没有在手机文本框旁边添加任何范围，如果它仍然为空，则表单将不会提交，也不会显示错误消息，所以请务必确认。如果您想将其保留为可选项，请向其添加一个类(class='optional')并将函数if($(this).val()=="")更改为if($(this).val()=="" && !$(this).hasClass('optional'))。就是这样。

Answer 3

您可以在表单中使用onsubmit事件。确保你改变：

<input type="button" value="Insert" onclick="ValidateForm">加入<input type="submit" value="Insert">

<form action="action.php" method="post" id="personID">加入<form action="action.php" method="post" id="personID" onsubmit="return ValidateForm();">

完整的代码如下：

function ValidateForm()
{
    $('span.error_msg').html('');
    var success = true;
    $("#personID input").each(function()
        {
            if($(this).val()=="")
            {
                $(this).next().html("Field needs filling");
                success = false;
            }
    });
    return success;
}


<form action="action.php" method="post" id="personID" onsubmit="return ValidateForm();">
First Name: <input type="text" name="first"><span class="error_msg"></span></br>
Last Name: <input type="text" name="last"><span class="error_msg"></span></br>
Phone: <input type="text" name="phone"><span class="error_msg"></span></br>
Mobile: <input type="text" name="mobile"></br>
Position: <input type="text" name="pos"><span class="error_msg"></span></br>
<input type="submit" value="Insert">
</form>

编辑非常好点Heera，我并没有真正关注那件事;-)修正了代码。

检查空文本字段的显示错误消息

3 个答案: