javascript - Jquery 验证的自定义行为

Question

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

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

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

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

<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 可能不会显示，因为 <span>只要没有内容或者您设置了 display:block; 就不会显示某些内容还有一个特别的height和width .