Javascript 新的HTML和jquery。无法显示我的错误消息_Javascript_Jquery_Html

Javascript 新的HTML和jquery。无法显示我的错误消息

javascript jquery html

Javascript 新的HTML和jquery。无法显示我的错误消息,javascript,jquery,html,Javascript,Jquery,Html,我需要一些JQUERY验证方面的帮助我似乎无法让它显示错误消息。我尝试将验证应用于电话号码、电子邮件地址、名字和姓氏。我已经做了大约4个小时了，不能让错误显示出来。我觉得我错过了一些非常简单的事情 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <scr

我需要一些JQUERY验证方面的帮助

我似乎无法让它显示错误消息。我尝试将验证应用于电话号码、电子邮件地址、名字和姓氏。我已经做了大约4个小时了，不能让错误显示出来。我觉得我错过了一些非常简单的事情

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
        <script>
            $(document).ready(function() {
                $("#info4all").validate({
                    rules: {
                        Name : {
                            required: true,
                            minlength: 3
                        },
                        PhoneNumber: {
                            required: true,
                            number: true,
                            minlength: 9
                        },
                        Email: {
                            required: true,
                            email: true
                        },
                        messages : {
                            Name: { 
                                minlength: "Name should be at least 3 characters"
                            },
                            PhoneNumber: {
                                required: "Please enter your age",
                                number: "Please enter your age as a numerical value",
                                minlength: "needs to be more numbers" 
                            },
                            email: {
                                email: "The email should be in the format: abc@domain.tld"
                            }
                        }
              });
          })
      </script>
      <title>Contact US</title> 
      <link rel="stylesheet" type="text/css" href ="stylerules.css">
      <meta charset=ntf-8">
    </head>
    <body>
      <nav>
        <center><table class= "menu">
<tr>
<td><button><a href= "home.html">Home</a></button></td>
<td><button><a href= "aboutus.html">AboutUs</a></button></td>
<td><button><a href= "ContactUs.html">ContactUs</a></button></td>
<td><button><a href= "FAQS.html">FAQ</a></button></td>
<td><button><a href= "index.html">Homepage</a></button></td>
</tr>
</center></table>
</nav>


<div id="container" class="centertext">

<header><h1><hr> Wanna give us a ring? Here's How.</h1></hr>


<nav>
</nav>

<div id ="left">
.
</div>

<div id="main">

<p> Here you can find a list of complete staff directory and our roles in the orginziaiton. </p>

.
</div>
</body>
<footer>

<p><center><a href="home.html">Home</a></p>
<a href="aboutus.html">Learn More About Us</a>
<a href="Faqs.html">Faqs</a>
<a href="contactus.html">More Information</a>
<a href="index.html">Welcome Page</a>
</a></center></p>

<h3>Times Avaliable for meeting</h3>
<p>Here you can find times we are avaliable for meeting!</p>

<table id="contactlist" style="width:100%">
<tr>
<th>Monday</th>
<th>Wensday</th>
<th>Friday</th>
</tr>
<tr>
<td>11:30AM</td>
<td>1:30PM</td>
<td>3:30PM</td>
</tr>
<tr>
<td>1:00PM</td>
<td>2:00PM</td>
<td>4:00PM</td>
</tr>
<tr>
<td>2:00PM</td>
<td>3:00PM</td>
<td>5:00PM</td>
</tr>

<form id="info4all"First name & Last Name:<br>

<input type="text" name="Name"><br>
Phone Number:<br>
<input type="tel" name="PhoneNumber">
<br> Email address:<br>
<input type="Email" name="Email">
<br> Date:<br>
<br><input type="Date" name="Date"></br>
<br>When should we contact you?</br>
<input type="radio" name="Selection" value="Dates" checked> Morning<br>
<input type="radio" name="Selection" value="Dates"> Afternoon<br>
<input type="radio" name="Selection" value="Dates"> Weekend</br>

<br>What can we help you with?
<br />
<input type="checkbox" name="Information" value="Information" />Information
<br />
<input type="checkbox" name="Questions" value="Questions" checked="checked" />Questions
<br />
<input type="checkbox" name="Staff Options" value="Staff Options" />Staff Options
<br />
<input type="checkbox" name="Other" value="Other" />Other..
</br>

<br>Choose how you wish us to contact you</br><select>
<option value="Telephome">Landline</option>
<option value="Email">Email</option>
<option value="Call">Cell</option>
<option value="In Person">In Person</option>
</select>
</br>


<br><button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button></br>

</form>


<br></table>
</footer>

<html>


$（文档）.ready（函数（）{
$（“#info4all”）.validate({
规则：{
姓名：{
要求：正确，
最小长度：3
},
电话号码：{
要求：正确，
数字：对，
最小长度：9
},
电邮：{
要求：正确，
电子邮件：真的
},
信息：{
姓名：{
minlength:“名称应至少包含3个字符”
},
电话号码：{
必填：“请输入您的年龄”，
数字：“请输入您的年龄作为数值”，
minlength：“需要更多的数字”
},
电邮：{
电子邮件：“电子邮件的格式应为：abc@domain.tld"
}
}
});
})
联系我们
请检查你的javascript括号。看起来你遗漏了一些。应该是这样的-
$("#info4all").validate({
  rules: {
    Name: {
      required: true,
      minlength: 3
    },
    PhoneNumber: {
      required: true,
      number: true,
      minlength: 9
    },
    Email: {
      required: true,
      email: true
    },
    messages: {
      Name: {
        minlength: "Name should be at least 3 characters"
      },
      PhoneNumber: {
        required: "Please enter your age",
        number: "Please enter your age as a numerical value",
        minlength: "needs to be more numbers"
      },
      email: {
        email: "The email should be in the format: abc@domain.tld"
      }
    }
  }
});

在结束脚本之前，请参阅两个额外的括号？
也要检查JSFiddle
这对我来说是个好办法，你的表单格式不正确，而且你在脚本中漏掉了括号
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script>
$(document).ready(function() {
    $("#info4all").validate({
        rules: {
            Name : {
                required: true,
                minlength: 3
            },
            PhoneNumber: {
                required: true,
                number: true,
                minlength: 9
            },
            Email: {
                required: true,
                email: true
            }
        },
        messages : {
            Name: "Name should be at least 3 characters",
            PhoneNumber: {
                required: "Please enter your age",
                number: "Please enter your age as a numerical value",
                minlength: "needs to be more numbers"
            },
            Email: {
                email: "The email should be in the format: abc@domain.tld"
            }
        }          
    })
})


</script>
<title>Contact US</title>
<link rel="stylesheet" type="text/css" href ="stylerules.css">
<meta charset="utf-8">
<meta name="keywords" content ="Contact Us, Staff">
<meta name="descrtiption" content="Looking to talk to us personally. Contact us Here.."'>
<meta name="author" content="Michael Cortez">
</head>


<body>

<nav>
<center><table class= "menu">
<tr>
<td><button><a href= "home.html">Home</a></button></td>
<td><button><a href= "aboutus.html">AboutUs</a></button></td>
<td><button><a href= "ContactUs.html">ContactUs</a></button></td>
<td><button><a href= "FAQS.html">FAQ</a></button></td>
<td><button><a href= "index.html">Homepage</a></button></td>
</tr>
</center></table>
</nav>


<div id="container" class="centertext">

<header><h1><hr> Wanna give us a ring? Here's How.</h1></hr>


<nav>
</nav>

<div id ="left">
.
</div>

<div id="main">

<p> Here you can find a list of complete staff directory and our roles in the orginziaiton. </p>

.
</div>
</body>
<footer>

<p><center><a href="home.html">Home</a></p>
<a href="aboutus.html">Learn More About Us</a>
<a href="Faqs.html">Faqs</a>
<a href="contactus.html">More Information</a>
<a href="index.html">Welcome Page</a>
</a></center></p>

<h3>Times Avaliable for meeting</h3>
<p>Here you can find times we are avaliable for meeting!</p>

<table id="contactlist" style="width:100%">
<tr>
<th>Monday</th>
<th>Wensday</th>
<th>Friday</th>
</tr>
<tr>
<td>11:30AM</td>
<td>1:30PM</td>
<td>3:30PM</td>
</tr>
<tr>
<td>1:00PM</td>
<td>2:00PM</td>
<td>4:00PM</td>
</tr>
<tr>
<td>2:00PM</td>
<td>3:00PM</td>
<td>5:00PM</td>
</tr>

<form id="info4all" name="info4all">
    First name & Last Name:<br>
    <input type="text" name="Name" required /><br>
    Phone Number:<br>
    <input type="tel" name="PhoneNumber" required />
    <br> Email address:<br>
    <input type="email" name="Email" required />
    <br> Date:<br>
    <br><input type="Date" name="Date"></br>
    <br>When should we contact you?</br>
    <input type="radio" name="Selection" value="Dates" checked> Morning<br>
    <input type="radio" name="Selection" value="Dates"> Afternoon<br>
    <input type="radio" name="Selection" value="Dates"> Weekend</br>

    <br>What can we help you with?
    <br />
    <input type="checkbox" name="Information" value="Information" />Information
    <br />
    <input type="checkbox" name="Questions" value="Questions" checked="checked" />Questions
    <br />
    <input type="checkbox" name="Staff Options" value="Staff Options" />Staff Options
    <br />
    <input type="checkbox" name="Other" value="Other" />Other..
    </br>

    <br>Choose how you wish us to contact you</br><select>
    <option value="Telephome">Landline</option>
    <option value="Email">Email</option>
    <option value="Call">Cell</option>
    <option value="In Person">In Person</option>
    </select>
    </br>


    <br><button type="submit" value="Submit">Submit</button>
    <button type="reset" value="Reset">Reset</button></br>

</form>


<br></table>
</footer>


<html>


$（文档）.ready（函数（）{
$（“#info4all”）.validate({
规则：{
姓名：{
要求：正确，
最小长度：3
},
电话号码：{
要求：正确，
数字：对，
最小长度：9
},
电邮：{
要求：正确，
电子邮件：真的
}
},
信息：{
名称：“名称应至少包含3个字符”，
电话号码：{
必填：“请输入您的年龄”，
数字：“请输入您的年龄作为数值”，
minlength：“需要更多的数字”
},
电邮：{
电子邮件：“电子邮件的格式应为：abc@domain.tld"
}
}          
})
})
联系我们
试试这段代码，我已经修复了HTML标记中的一些错误并更正了JQuery括号。还添加了错误类以在验证函数中的每个错误消息上显示红色
 $("#info4all").validate({
      rules: {
        Name : {
          required: true,
          minlength: 3
        },
        PhoneNumber: {
          required: true,
          number: true,
          minlength: 9
        },
        Email: {
          required: true,
          email: true
        }
        },
        messages : {
          Name: { 
            minlength: "Name should be at least 3 characters"
          },
          PhoneNumber: {
            required: "Please enter your age",
            number: "Please enter your age as a numerical value",
            minlength: "needs to be more numbers" 
          },
          email: {
            email: "The email should be in the format: abc@domain.tld"
          }   

        },
         errorClass: 'invalidField',
    errorPlacement: function(error, element) {
        error.css('color', 'red');
        if(element.is(":radio"))
        {
            error.appendTo(element.parents('.container'));
        }else{
        error.insertAfter(element);
        }
    },
    errorElement: "span",
    submitHandler: function(form) {

    }
      });
    });

通过下面的链接找到完整的固定代码。

顺便说一句，表单现在运行得非常好
不要忘记在html页面的末尾添加和jquery验证插件
希望这个答案能帮助你
注意你的开始标签格式不正确…缺少
。也缺少
上的名称
，我对你的js做了一些格式化，你缺少一个结束标签
和一个结束标签

。欢迎使用堆栈溢出。关闭

标记后，代码中有一个

页脚

元素。您需要将其放入正文中。此外，关闭的

标记没有关闭。应该将其写入