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

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

jquery html

Jquery 检查空文本字段的显示错误消息,jquery,html,Jquery,Html,在使用jquery发布之前，我想检查post表单中的文本字段是否为空。如果有，我想在文本区域旁边显示一条错误消息。我单击按钮提交带有空字段的信息，但没有显示任何消息。在执行过帐之前，我需要此检查功能。这就是我所做的 <!DOCTYPE html> <html> <head> <script src="jquery-1.7.1.min.js"></script> <script> fun

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

<!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>


函数ValidateForm（）
{
$（文档）.ready（函数）(
{
$（“#personID”）。每个（函数（）
{
如果（this.val（）==“”）
{
$（“#error_msg”）.html（“字段需要填写”）；
}              
}      
}
));
}
名字：

姓氏：

电话：

流动电话：

职位：

此

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

应该是这个

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

或者这个

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

if(!this.value)

或者这个

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

if(!this.value)

将

此

（对元素的引用）传递到

函数将返回引用元素的jQuery对象

这使您能够调用jQuery方法，如

.val（）

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

将您的代码更改为此

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

不需要

$（document）.ready（）

，因为在提交表单之前，代码不会运行。

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

转换为

完整代码如下：

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>

函数ValidateForm（）
{
$（'span.error_msg'）.html（“”）；
var成功=真；
$（“#personID输入”）。每个（函数（）
{
if（$（this）.val（）==“”）
{
$（this.next（）.html（“字段需要填充”）；
成功=错误；
}
});
回归成功；
}
名字：

姓氏：

电话：

流动电话：

职位：

编辑非常好的一点Heera，我没有真正注意到这一点；-）修复了代码。

函数应该是

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>

你的表格应该是

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>


名字：

姓氏：

电话：

流动电话：

职位：

您没有在手机文本框旁边添加任何span，如果该文本框仍然为空，则不会提交表单，也不会显示错误消息，因此请确认。如果您想将其保留为可选，则向其添加一个类

（class='optional'）

，并将函数

If（$（this）.val（）==“”）

更改为

If（$（this）.val（）==“”&&&&！$（this）.hasClass（'optional'）

。就是这样。

Rick Kuipers已经给出了一个很好的解决方案，但我认为他没有注意到span的“error\u msg”被声明为id not class。所以它不能正常工作，我的意思是只有第一个跨度会被错误消息填充。要修复它，您必须在“error\u msg”span中使用class而不是id。这一点很好！正在更加注意解决提交问题，而不是错误消息；-）根据您的代码修复了我的代码，谢谢。谢谢，没关系，我们经常出错。