Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/452.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Jquery验证的定制行为_Javascript_Jquery_Jquery Validate - Fatal编程技术网

Javascript Jquery验证的定制行为

Javascript Jquery验证的定制行为,javascript,jquery,jquery-validate,Javascript,Jquery,Jquery Validate,我使用jqueryvalidate向用户提供反馈,并向他们提供关于他们在表单中输入的详细信息的有效性的更新。但是我在自定义Jquery验证创建的行为方面遇到了困难 我有这样一个简单的表格: <form id="form1"> <label for="input1" /> <input name="input1" /> <input type="submit" /> </form> <form id="form1"> <

我使用jqueryvalidate向用户提供反馈,并向他们提供关于他们在表单中输入的详细信息的有效性的更新。但是我在自定义Jquery验证创建的行为方面遇到了困难

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

<form id="form1">
<label for="input1" />
<input name="input1" />
<input type="submit" />
</form>
<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 validate输出如下内容:

<form id="form1">
<label for="input1" />
<input name="input1" />
<input type="submit" />
</form>
<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相当缺乏经验。如有任何指导意见,请妥善处理

干杯

编辑:


这里有一个指向JSFIDLE的链接:带有示例表单。

也可以发布css文件,或者在其上执行JSFIDLE?因为您的错误图标可能不会显示,因为只要它没有内容或您设置了display:block,它就不会显示;还有一个特殊的高度和宽度。

跨度中有内容,我对我的问题进行了修改,以反映这一点,很抱歉有任何混淆。好的,没问题,但你能做一个简单的解释吗?我很想帮助你,但如果没有这一点,那就很困难了。我在我的原始帖子中包含了一个指向JSFIDLE的链接,随着我在这方面的进步,我会不断更新它。谢谢