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

Question

我的 JQUERY 验证需要一些帮助。

我似乎无法让它显示错误消息。 我尝试将验证应用于电话号码、email 地址以及名字和姓氏。 我已经在这里待了大约 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>

Answer 1

请检查您的 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 太https://jsfiddle.net/ashhaq12345/rbnztvx0/7/

Answer 2

这对我有用，你的表格格式不正确，你错过了脚本中的括号

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

Answer 3

试试这段代码，我已经修复了 HTML 标签中的一些错误，并更正了 JQuery 括号。 还添加了错误 class 以在验证 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"
          }   

        },
         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) {

    }
      });
    });

通过以下链接找到完整的固定代码。 https://jsfiddle.net/RamshaS/2w85Lxnz/1/

顺便说一句，表格现在工作得很好！

不要忘记在 html 页面末尾添加这个和这个jquery 验证插件。

希望这个答案对你有帮助

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

问题描述

3 个解决方案

解决方案1
0 2019-10-19 23:07:45

解决方案2
0 2019-10-19 23:19:26

解决方案3
0 2019-10-19 23:26:52

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

问题描述

3 个解决方案

解决方案1 0 2019-10-19 23:07:45

解决方案2 0 2019-10-19 23:19:26

解决方案3 0 2019-10-19 23:26:52

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

解决方案1
0 2019-10-19 23:07:45

解决方案2
0 2019-10-19 23:19:26

解决方案3
0 2019-10-19 23:26:52