更新：

Question

我将我的错误消息放在div（errorElement）中并给它errorClass:"callout border-callout error，我需要自定义它。这就是它现在的样子：

<input type="text" id="email" name="email" placeholder="Enter your E-Mail Address"/>
<div id="email-id" class="callout border-callout error"><!-- this is my error div -->
    Here is my error message
</div>

但是我想在这个errorElement中添加两个元素，所以我可以正确地设置它。理想情况下，它应如下所示：

<input type="text" id="email" name="email" placeholder="Enter your E-Mail Address"/>
<div id="email-id" class="callout border-callout error"><!-- this is my error div -->
    Here is my error message
    <b class="border-notch notch"></b>
    <b class="notch"></b>
</div>

我当前的jquery验证代码：

$(function() {
    $('#form1').validate({
        rules: {
            email: {
                required: true,
                email: true
            },
            fname: {
                required: true,
            },
            lname: {
                required: true,
            }

        },
        messages: {
            email: {
                required: 'Please enter your email',
                email: 'Please enter a valid email'
            },
            fname: {
                required: 'Please enter your First Name',
            },
            lname: {
                required: 'Please enter your Last Name',
            }
        },
        submitHandler: function(form) {
            $(form).ajaxSubmit({
                dataType: 'json',
                success: function(jsonResponse) {
                                //Example json object returned by server: [false, "You have already subscribed!"]
                                var notyType;
                                if (jsonResponse.response) {
                                    notyType = 'success';
                                } else {
                                    notyType = 'error';
                                }
                                showNoty(jsonResponse.message, notyType);
                            }
                        });
        },
        errorClass: "error callout border-callout",


    });


});

更新：

<form method="post" id='form1' class="subscription-form">
   <div class="subscription-form-email">
       <span class="input-row"><input type="text" id="email" name="email" placeholder="Enter your E-Mail Address"/></span>
       <div id="email-id" class="callout border-callout error" style="display:none"> 
            <b class="border-notch notch"></b>
            <b class="notch"></b>
       </div>
       <span class="input-row"><input type="text" id="fname" name="fname" placeholder="First Name"/></span>
       <span class="input-row"><input type="text" id="lname" name="lname" placeholder="Last Name"/></span>
   </div>

   <input type="submit" value="SUBSCRIBE" class="submit-button" name="submit" id="submitButton" title="Click here to submit your message!" />

</form>

Answer 1

您的代码有几个问题需要纠正......

1）修复HTML。您的div代码不匹配...具体来说，您还有</div>个<div>。div。我没有看到任何其他HTML问题，但您的布局看起来像是input个元素与span元素嵌套在span元素中的不寻常混合。如果您希望这些div元素的行为类似行，那么恕我直言，它们应该是border-callout个元素。

2）错误类class是一个真正的问题。虽然在技术上可以使div名称包含连字符，但这是不好的做法。为什么？因为JavaScript会将该连字符解释为减号。 Your unedited code in a jsFiddle表明错误消息将相互堆叠而不是切换。 Simply removing border-callout from errorClass, clears that issue right up

就您所问的内容而言......如何将错误消息插入到预先填充的其他HTML label中。

首先，您必须将消息放入自己的某种容器中...... p，span，errorElement等。这就是插件的方式需要它，所以它可以成为目标。除非您使用label选项指定，否则默认情况下插件只会使用<div id="email-id" class="callout border-callout error"> <label>Here is my error message</label> <b class="border-notch notch"></b> <b class="notch"></b> </div>。

<div>

然后使用errorPlacement回调函数和一堆jQuery DOM遍历方法将消息标签对象放在errorPlacement: function(error, element) { error.insertBefore(element.parent().next('div').children().first()); }内...

 error         // the error object (includes message and its label container)
.insertBefore( // insert the error object before what's defined inside ()
   element     // your input element object
  .parent()    // the span which encloses your input element
  .next('div') // the div which immediately follows your span
  .children()  // everything inside your div
  .first()     // the first element inside your div
)              // closes insertBefore()

故障：

<div>

然后，由于您还需要切换highlight容器以及错误消息，因此您需要使用unhighlight和highlight: function (element) { $(element).parent().next('div').show(); }, unhighlight: function (element) { $(element).parent().next('div').hide(); }回调函数以及一些jQuery DOM遍历方法...

{{1}}

工作演示：http://jsfiddle.net/naa6w/

自定义html里面的jquery错误元素验证

更新：

1 个答案: