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 validate插件。

由于这三个字段的规则为required: true，因此会出现此错误。

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

Answer 2

此处使用 jQuery validation plugin ，因此此插件会自动处理错误消息。

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

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

这个CSS用于设置这些消息的样式：

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

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

2 个答案: