jquery - 验证错误消息样式

Question

我试图让 jQuery Validate 错误类以某种方式显示，但我很难让它工作。我希望验证消息直接出现在我的输入下方。现在它们出现在我的输入下，但是整个输入跳到下一行。

输入设置自然是这样的:

姓名--电话号码--邮箱

我希望消息显示如下:

姓名--电话号码--邮箱

留言--留言--留言

现在它正在做:

名字

留言

数量

留言

电子邮件

留言

HTML 看起来像这样:

<form action="" method="POST" id="contact-form1">
                <input type="text" class="contact-input show-input" name="name" id="name" placeholder="Name *">
                <input type="text" class="contact-input show-input" name="number" id="number" placeholder="Phone Number *">
                <input type="text" class="contact-input show-input" name="email" id="email" placeholder="Email *">
                <input type="text" class="contact-input hidden-input" placeholder="Company Name">
                <input type="text" class="contact-input hidden-input" placeholder="Title">
                <input type="text" class="contact-input hidden-input" placeholder="Referral">
                <textarea class="contact-message" rows="10" name="message" id="message" placeholder="Your Message*"></textarea>
                <input type="submit" value="Submit" id="contact-submit">
            </form>

我尝试将 div 包裹在每个输入周围，但这会将每个输入以 block 格式放在新的一行上。

这是一个 fiddle ，可以看到它在做什么:Fiddle

我做错了什么？

更新:

 submitHandler: function(form) {

        var name = $("#name").val();
        var number = $("#number").val();
        var email = $("#email").val();
        var message = $("#message").val();
        /*var company_name = $("#company_name");
        var title = $("#title");
        var referral = $("#referral");*/
        //var targeted_popup_class = jQuery(this).attr('data-popup-open');

        $.ajax({
          url: "map-send.php",
          type: "POST",
          data: {
            "name": name,
            "number": number,
            "email": email,
            "message": message
            /*"company_name": company_name,
            "title": title,
            "referral": referral*/
          },
          success: function(data) {

在上面的代码中，您会看到注释掉的元素。这些是未经验证的元素。出于某种原因，当我删除评论标签时，我的页面就死了。没有错误，它只是在我提交页面时卡住。我尝试将变量放在验证标签之外，但仍然无济于事。你知道为什么这会终止页面吗？

Answer 1

看the documentation :

1. 您不能设置 the onfocusout option为 true。它覆盖了插件的内部功能，从而破坏了它。它只能设置为 false 以禁用此选项或覆盖功能。否则，请保留此选项以保留默认情况下处于事件状态的 onfocusout 行为。

2. 您在某些输入值上缺少 .val()，因此您试图传递整个 jQuery 对象而不仅仅是它的值。但是，与其尝试在 .ajax() 函数中手动指定每个值，不如使用 jQuery .serialize()传递整个表单的数据字符串。
   
   

   data: $("#contact-form1").serialize(),
   

   在 submitHandler 函数中的任何地方，您都可以使用传递的 form 参数变量...
   
   

   data: $(form).serialize(),
   

3. 使用 errorElement和 errorPlacement选项来确定错误消息在 DOM 中的显示方式/位置。

   • errorElement 默认为 label(内联元素)，您可以将其更改为 div( block 级元素)或您可能需要的任何元素。默认值如下所示。
     
     

     errorElement: 'label', // default
     

   • errorPlacement 默认在输入元素之后插入错误信息。在您的情况下，您的结构会导致它换行，从而破坏您的布局。如果您希望消息出现在 DOM 中的其他地方，那么您需要编写一个新的 errorPlacement 函数。默认值如下所示作为示例。
     
     

     errorPlacement: function(error, element) {
         error.insertAfter(element); // default
     },
     

您的根本问题是您在设计表单布局时没有考虑到错误消息。您需要重新开始并制作一个可以将错误消息元素容纳在您想要的确切位置的布局。然后这两个自定义 jQuery Validate 函数可以动态创建错误消息元素并将其插入到您想要的位置。

概念验证示例:

HTML

<form>
    <div class="input">
        <input type="text" name="name" />
    </div>
    <div class="input">
        <input type="text" name="number" />
    </div>
    ....

JavaScript

$("#contact-form1").validate({
    errorElement: 'div',
    errorPlacement: function(error, element) {
        error.insertAfter(element);  // default
    },
    rules: { ....

演示:https://jsfiddle.net/ng3a9xwz/

---

编辑:

检查实时 DOM 揭示...

<form novalidate="novalidate">
    <div class="input">
        <input type="text" name="name" class="error" />
        <div for="name" class="error">Please enter your name</div>
    </div>
    ....

errorElement: 'div' 将错误消息放入 div 并且默认的 errorPlacement 插入这个新的 div 紧跟在 input 元素之后。设计您的布局(CSS 和 HTML)以正确适应这些选项。您可以使用实时 DOM 中的标记进行布局测试。