验证错误消息样式

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，但这会将每个输入以块格式放在一个新行上。

这是一个小提琴，看看它在做什么：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（块级元素）或您可能需要的任何元素。下面以默认值为例。
     
     

     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/

---

编辑：

检查 live 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 在input 元素之后立即插入这个新的div。设计您的布局（CSS 和 HTML）以适当地适应这些选项。您可以使用实时 DOM 中的标记进行布局测试。

Answer 2

尝试将每个输入放在一个 div 中，然后将所有输入放在一个 div 中的一行中，将整体 div 设置为 100% 宽度，将内部 div 设置为 100/3 %