javascript - 简单的 jquery 验证创建错误消息

Question

很抱歉打开对于经验丰富的 jquery 用户来说可能是一个基本问题，但我正在学习 - 我目前正在进行表单验证并希望继续使用更高级的方法，我正在使用教程并且我喜欢教程只是他们缺乏一些解释让我转向这里:

好的，我们有一个基本的形式

提交的表单有错误

代码

<form method="post" name="productform" id="productform" >
    <p>
        <label for='prodid'>Product ID: (maxlength 10)</label><br>
        <input type="text" name="prodid" >
    </p>
    <p>
        <label for='email'>Email: (minlength 10)</label><br>
        <input type="text" name="email" >
    </p>
    <p>
        <label for='address'>Address( length between 10 and 250)</label><br>
        <input type="text" name="address">
    </p>    
    <p>
        <label for='message'>Message:( length between 50 and 1050)</label> <br>
        <textarea name="message"></textarea>
    </p>

    <input type="submit" name='submit' value="Post it !">
</form>

JQUERY

$(function()
{
    $("#productform").validate(
      {
        rules: 
        {
          prodid: 
          {
            required: true,
            maxlength: 10
          },
          email: 
          {
            required: true,
            email: true,
            minlength:10
          },
          address:
          {
            required: true,
            rangelength:[10,250]
          },
          message: 
          {
            rangelength:[50,1050]
          }
        }
      });   
});

CSS

body
{
  font-family: Arial, Sans-serif;
}
.error
{
color:red;
font-family:verdana, Helvetica;
}

我的问题

当提交有错误的表单时，文本框旁边会显示红色错误消息吗？我在 Jquery 代码中看不到创建错误消息的位置....如果文本框旁边有一个 span 元素或类似元素，然后将错误附加到该元素，我会理解我看不到它在代码中发生的位置以上...

我确定我在这里遗漏了一些简单或基本的东西......但在我掌握了这一点之前我无法继续前进，所以这很令人沮丧。

Answer 1

jQuery validation plugin 在这里使用，因此错误消息由该插件自动处理。

这意味着您不需要使用 span 或其他元素来包装错误消息，这由插件处理。

并且在给定的 jquery 函数中，指定了验证规则，因此将根据这些规则验证表单。

此 CSS 用于设置这些消息的样式:

.error {
    color:red;
    font-family:verdana, Helvetica;
}