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

我想检查发布表单中的文本字段在使用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>

来源

2012-01-20 Mackintoast

而你的问题是？ – cambraca

的功能应该是

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'))。而已。

来源

2012-01-20 23:24:11

这...

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()由于代码不运行，直到提交表单。

来源

2012-01-20 22:45:59

您可以使用窗体中的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，我并没有真正地重视到那个问题;-)修正了代码。

来源

2012-01-20 22:59:46

Rick Kuipers已经给出了一个很好的解决方案，但我认为他没有注意到span的“error_msg”被声明为id不是class。所以它不能正常工作我的意思是只有第一个跨度会填充错误信息。要修复它，你必须在你的“error_msg”范围内使用class而不是id。 –

好点！更注重解决提交问题而不是错误信息;-) 根据你的问题修复了我的代码，谢谢。 –

谢谢，没关系，我们经常犯错误。 –

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

回答

相关问题