Question

我正在阅读有关表单验证的教程，我遵循了它。表单仍未经过验证。请帮帮我。感谢

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="stylesheet.css" type="text/css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>    
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
    $("#registerForm").validate();
  });
</script>

<title>9am Resource Agency</title>
</head>

这是表格，

 <form id="form1" class="registerForm" method="post" action="mailsent.php">                                                
                      <input name="name" class="required" type="text" minlength="3"  id="name"  style="font-family: Verdana; color:#FFFFFF; ; font-size: 13px; background-color: #0E0E0F;border: 1px solid #740086; margin-bottom:10px;  width:385px;" size="32" value="Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>                  
                      <input name="email" class="required" type="text" id="email" minlength="5"  style=" font-family: Verdana;  font-size: 13px;  color:#FFFFFF; background-color: #0E0E0F; border: 1px solid #740086;  margin-bottom:10px;   width:385px;" size="38" value="Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
                      <input name="phone"  type="text" id="phone" minlength="7" style=" font-family: Verdana; color:#FFFFFF; font-size: 13px;background-color: #0E0E0F; border: 1px solid #740086; width:385px;  margin-bottom:10px;" size="385" value="Phone #" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
                     <textarea
                     minlength="10"
                     class="required"
    name="message"
    cols="37"
    rows="12"
    id="message"
    style="font-family:Verdana; color:#FFFFFF; font-size:13px; background-color:#0E0E0F; border:1px solid #740086; width:385px;margin-bottom:10px;overflow:hidden;"
    onFocus="if(this.value==this.defaultValue)this.value='';"
    onBlur="if(this.value=='')this.value=this.defaultValue;">
Message
</textarea>

                      <input style="margin-left:303px; margin-top:20px;" type="image" src="logonbutton.png" name="Submit" value="Submit" />                    
   </form>

Answer 1

您使用的是$("#registerForm").validate();，但您的表单ID为form1。改为：

$("#form1").validate();

Answer 2

工作演示 http://jsfiddle.net/dMTCq/

良好的链接：http://docs.jquery.com/Plugins/Validation/validate

还有一些额外的来自我之前的演示：http://jsfiddle.net/CRfuZ/

这应该有帮助：）

<强>码

jQuery(function($) {
    $("#form1").validate();
});

* 以及如果你想用于课堂上使用* .这样的话。

jQuery(function($) {
    $(".registerForm").validate();
});

Answer 3

无需在头部包含两个jquery-core文件。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

Answer 4

我很好奇为什么你的脚本标签中有两个版本的jQuery。版本1.6.1和版本1.3.2

如果你想执行jQuery验证，你也不需要包含jQuery不显眼的验证。

我建议删除版本1.3.2行，因为它与1.6.1冲突，然后添加必要的脚本进行验证。按此顺序：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

如果你想要最新版本的jQuery，我建议不要使用1.6.1脚本使用它。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

这4行可以放在_Layout部分的head视图中，以便所有视图都可以使用。然后，您不必将它们放在您的个人视图中

使用jquery验证表单

4 个答案: