Question

我正在使用Jquery验证来向用户提供反馈，并向他们提供有关他们在表单中输入的详细信息的有效性的更新。但是我无法自定义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，因为<span>只要没有内容就会显示某些内容，或者您设置display:block;以及特殊height和width。

自定义Jquery验证的行为

1 个答案: