пользовательский html внутри errorElement of jquery Validate

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 Validate:

$(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", 


    }); 


}); 

UPDATE:

<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>. Я не вижу других проблем с HTML, но ваш макет выглядит как необычное сочетание элементов div с элементами input, вложенными внутри span элементов. Если вы хотите, чтобы эти span элементы отображались как строки, тогда IMHO, они должны быть div элементов.

2) Класс ошибки, border-callout, является реальной проблемой. Хотя может быть технически нормально иметь class имена, содержащие дефисы, это плохая практика. Зачем? Поскольку JavaScript будет интерпретировать этот дефис как знак минуса. Your unedited code in a jsFiddle показывает, что сообщения об ошибках будут складываться друг на друга вместо переключения. Simply removing border-callout from errorClass, clears that issue right up.

---

Насколько то, что вы просите ... как вставить сообщение об ошибке в предопределенной 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 и кучу методов обхода DOM JQuery ...

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 d unhighlight функции обратного вызова и пароли jQuery DOM методы обхода ...

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

Рабочая DEMO: http://jsfiddle.net/naa6w/