Javascript Jquery验证的定制行为
我使用jqueryvalidate向用户提供反馈,并向他们提供关于他们在表单中输入的详细信息的有效性的更新。但是我在自定义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"> <
<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的链接,随着我在这方面的进步,我会不断更新它。谢谢