3

我将我的错误消息放在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>
4

1 回答 1

3

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

1）修复HTML。您的标签不匹配div...具体来说，您的标签</div>比您的标签多一个<div>。我没有看到任何其他 HTML 问题，但您的布局看起来像是div元素与input嵌套在span元素内的元素的不寻常混合。如果您希望这些span元素表现得像行，那么恕我直言，它们应该是div元素。

2) 错误类 ,border-callout是一个真正的问题。尽管class名称中包含连字符在技术上是可以的，但这是不好的做法。为什么？因为 JavaScript 会将连字符解释为减号。 您在 jsFiddle 中未经编辑的代码显示错误消息将相互叠加而不是切换。 简单地删除border-callout，errorClass就解决了这个问题。

至于您要问什么...如何将错误消息插入到预定义div的完整的其他 HTML 中。

首先，您必须将消息放入它自己的某种容器中…… label、、、p等等span。插件需要它，因此它可以被定位。除非您使用errorElement选项指定它，否则插件将label默认使用。

<div id="email-id" class="callout border-callout error"><!-- this is my error div -->
    <label>Here is my error message</label><!-- message must be inside a container -->
    <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几个 jQuery DOM 遍历方法......

highlight: function (element) {
    $(element).parent().next('div').show();
},
unhighlight: function (element) {
    $(element).parent().next('div').hide();
}

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

于 2013-10-03T20:47:08.587 回答