自定义 Jquery 验证的行为

Question

我正在使用 Jquery validate 向用户提供反馈，并向他们提供有关他们在表单中输入的详细信息的有效性的更新。但我在自定义 Jquery validate 创建的行为时遇到了麻烦。

我有一个像这样的简单表单：

<form id="form1">
<label for="input1" />
<input name="input1" />
<input type="submit" />
</form>

当用户输入无效信息时，我希望 Jquery 验证输出如下内容：

<form id="form1">
<label for="input1" />
<input name="input1" class="error"/><span class="errorIcon">Error</span>
<p class="errorText">Error message</p>
<input type="submit" />
</form>

当用户使用有效信息填写字段时，我希望 Jquery 验证输出：

<form id="form1">
<label for="input1" />
<input name="input1" /><span class="successIcon">Success</span>
<input type="submit" />
</form>

我已经设置了所需的规则和自定义验证消息，因此它们可以正常启动，但我无法获得上述行为。

我目前有这个：

$('#form1').validate({
 showErrors: function(errorMap, errorList) {
 if (errorList < 1 ) {
   $('span.errorIcon').remove();
   $('p.errorText').remove();
   $('input.error').removeClass('error');
   $('select.error').removeClass('error');
   return;
 }
 $.each(errorList, function(index, error) {
   if ($(error.element).siblings('.errorText').length === 0 && $(error.element).siblings('.errorIcon').length === 0)  {
     $(error.element).next('p.errorText').remove();
     $(error.element).addClass('error');
     $(error.element).after(
       $('<p/>')
  .addClass('errorText')
  .append(error.message)
  );
   $(error.element).after(
       $('<span>There is an issue with this field</span>')
  .addClass('errorIcon')
   );
}
});
},
//rules and messages defined here
);

所以上面的内容没有达到我目前想要的需求，而且感觉我可能使这个问题过于复杂化。我对 javascript 和 Jquery 相当缺乏经验。任何有关对此进行排序的指导将不胜感激。

干杯

编辑：

这是一个jsfiddle的链接：http://jsfiddle.net/WJ9Vt/4/ 附有样本表格。

Answer 1

还可以发布你的 css 文件，或者对其进行 jsfiddle 吗？因为您的 errorIcon 可能不会显示，因为 只要没有内容或您设置了 display:block; 和特殊的 就不会显示某些内容高度和宽度。