验证错误消息样式

Question

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

输入设置自然是这样的：

姓名 -- 号码 -- 电子邮件

我希望消息显示如下：

姓名 -- 号码 -- 电子邮件

留言--留言--留言

现在正在做：

姓名

留言

人数

留言

电子邮件

留言

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 看看这是在做什么：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

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

Answer 2

看看the documentation:

您不能将 the onfocusout option 设置为 true。它覆盖了插件的内部功能，从而破坏了它。它只能设置为 false 以禁用此选项或覆盖功能。否则，保留此选项以保留默认情况下处于活动状态的 onfocusout 行为。
您的某些输入值缺少 .val()，因此您试图传递整个 jQuery 对象，而不仅仅是它的值。但是，与其尝试在 .ajax() 函数中手动指定每个值，不如使用 jQuery .serialize() 传递整个表单的数据字符串。
```
data: $("#contact-form1").serialize(),
```
和 submitHandler 函数中的任何地方，您可以使用传递的 form 参数变量...
```
data: $(form).serialize(),
```
使用errorElement and errorPlacement选项确定how/where错误信息出现在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 中的标记进行布局测试。

验证错误消息样式

Validate error message styling

html

css

jquery

jquery-validate