我使用jquery验证如何在单独的区域中显示错误

时间:2011-08-01 08:36:18

标签: jquery html validation webforms

我有一个表单,我正在验证使用jquery验证插件。我试图做的是将错误显示在一个名为“错误”的单独div中,任何人都可以帮我这个吗?

表格代码在这里:

<form name="contactform" id="contactform" method="post" action="/contactform/send_form_email.php">

           <label for="your_name">YOUR NAME</label>
           <input type="text" name="your_name" id="your_name" class="fulltext"/>

           <label for="type">TYPE OF EVENT</label>
           <input type="text" name="type" id="type" class="fulltext"/>

           <label for="guests">GUESTS</label>
           <input type="text" name="guests" id="guests" class="shorttext"/>

           <label for="date">DATE</label>
           <input type="text"  name="date" id="date" class="shorttext"/>

           <label for="phone">PHONE</label>
           <input type="text"  name="phone" id="phone" class="shorttext"/>

           <label for="email">ENTER EMAIL ADDRESS</label>
           <input type="text" value="ENTER EMAIL ADDRESS" name="email" id="email" class="fulltext"/>
           <button type="submit" value="submit">go</button>
           </form>

并且JavaScript在这里:

    rules: {
     email: { required: true, email: true,  maxlength: 50 },
     honeypot: { maxlength: 0 }
    }
  });

对此的任何帮助将不胜感激。

感谢。

2 个答案:

答案 0 :(得分:1)

此处提及的验证插件http://jquery.bassistance.de有两个属性errorContainererrorPlacement,可用于在页面上的其他位置放置/显示错误。这是一个演示http://jquery.bassistance.de/validate/demo/custom-methods-demo.html。查看来源。如果您使用相同的插件,我相信您正在使用它,它应该是有帮助的。需要提交处理程序来实际处理表单的提交。请注意以下代码

$("#myform").validate({
 submitHandler: function(form) {
   // some other code
   // maybe disabling submit button
   // then:
   $(form).submit();//notice how form object is used, not the **id** of form is used here
   //^ if you dont take care, you will end up in too much recursion error
 }
});

阅读本文档http://docs.jquery.com/Plugins/Validation了解更多信息。

答案 1 :(得分:1)

您可以使用errorLabelContainer选项:

$("#contactform").validate({
    rules: {
        email: { required: true, email: true,  maxlength: 50 },
        honeypot: { maxlength: 0 }
    },
    errorLabelContainer: "#error",
    wrapper: "<div>"
});