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) {

在上面的代码中，您会看到注释掉的项目。这些是未经验证的项目。出于某种原因，当我拿走评论标签时，我的页面就会消失。没有错误，它只是在我提交页面时冻结。我尝试将变量置于validate标签之外，但它仍然没有帮助。你知道为什么会杀了这个页面吗？

Answer 1

查看the documentation：

您无法将the onfocusout option设置为true。它超越了插件的内部功能，从而打破了它。它只能设置为false才能禁用此选项或覆盖功能。否则，请保留此选项以保留onfocusout行为，该行为默认处于活动状态。
您在某些输入值上缺少.val()，因此您尝试传递整个jQuery对象而不是其值。但是，不要尝试在.ajax()函数中手动指定每个值，而是使用jQuery .serialize()传递整个表单的数据字符串。
```
data: $("#contact-form1").serialize(),
```
以及submitHandler函数中的任何位置，您可以使用传递的form参数变量...
```
data: $(form).serialize(),
```
使用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: { ....

DEMO：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中的标记进行布局测试。

Answer 2

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

验证错误消息样式

2 个答案: