jQuery表单验证插件:错误时返回false
jQuery Form Validation Plugin : Return false on error
在学习了如何制作jQuery插件的教程之后,我决定尝试一下,制作一个表单验证插件。到目前为止,我已经成功地实现了我所希望的90%,唯一剩下的就是使表单返回false,如果有空字段发现。
JSFIDDLE
我把我的全部代码放在jsfiddle,但它似乎不工作。也许是因为我需要包括我的插件文件,而不是粘贴在脚本部分。但我分享它只是为了以防你需要查看整个代码。
插件工作流(function(jQuery) {
window.cnt = 0;
jQuery.fn.border = function() {
this.each(function() {
var ele = jQuery(this);
var cur_val, ele_name;
if(// element is input, select, or textarea)
{
cur_val = ele.val();
}
else if(// element is radio)
{
ele_name = ele.attr('name');
cur_val = $('input:radio[name="'+ele_name+'"]:checked').val();
}
else if(// element is checkbox)
{
ele_name = ele.attr('name');
cur_val = $('input:checkbox[name="'+ele_name+'"]:checked').val();
}
if(! cur_val) // need to do something here to prevent form submission
{
cnt++;
if(// input, textarea, select element)
{
ele.addClass('border');
}
else if(// radio or checkbox element)
{
ele.parent().addClass('border');
}
}
else // need to do something here to make the form submission happen
{
if(// input, select, textarea)
{
ele.removeClass('border');
}
else if(radio or checkbox)
{
ele.parent().removeClass('border');
}
}
});
return this;
};
})(jQuery);// JavaScript Document
WHAT I TRIED
<script type="text/javascript">
$(function(){
$('form').submit(function(){
$('.required').border();
if(window.cnt > 0)
{
return false;
}
else
{
return true;
}
});
});
</script>
我创建了一个全局变量cnt
,并尝试在表单提交函数中使用它。它在有空元素时工作,但即使在所有元素都已填充后,它也返回false
。在提醒了cnt
的值之后,我发现在每次点击按钮时,cnt
的值都在之前的值的基础上不断增加,所以cnt > 0
总是返回true
。
因此,我试图找到一种方法从插件函数本身返回false
,这样我就不必在调用插件函数后添加if-else
条件。
简单地说,我想要达到的是
$(function(){
$('form').submit(function(){
$('.required').border(); // this line should take care of returning true or false for the submit function
});
});
因此,用户应该只调用$('.required').border();
,它应该负责其余的。
看看我在下面的代码中使用valid
变量的方式,而不是window.cnt
。
jQuery.fn.border = function() {
var valid = true;
this.each(function() {
var ele = jQuery(this);
var cur_val, ele_name;
if(// element is input, select, or textarea)
{
cur_val = ele.val();
}
else if(// element is radio)
{
ele_name = ele.attr('name');
cur_val = $('input:radio[name="'+ele_name+'"]:checked').val();
}
else if(// element is checkbox)
{
ele_name = ele.attr('name');
cur_val = $('input:checkbox[name="'+ele_name+'"]:checked').val();
}
if(! cur_val) // need to do something here to prevent form submission
{
valid = false;
if(// input, textarea, select element)
{
ele.addClass('border');
}
else if(// radio or checkbox element)
{
ele.parent().addClass('border');
}
}
else // need to do something here to make the form submission happen
{
if(// input, select, textarea)
{
ele.removeClass('border');
}
else if(radio or checkbox)
{
ele.parent().removeClass('border');
}
}
});
return valid;
}
您是否尝试在调用$时重置cnt变量?边界函数?
相关文章:
- Array.every返回false,而不是类型error
- Javascript If else 只返回 TRUE 或只返回 FALSE
- 为什么当我在数组上测试regex时,它会返回false
- 检查文本区域是否为空总是返回false
- PHP strtotime()为JavaScript日期字符串返回false
- onsubmit返回false,但submit仍然执行
- 这个代码会返回false吗
- Ajax向表单返回false
- 表单验证JavaScript编号总是返回false
- 使用!而in运算符在应该为true时返回false,为什么
- jQuery.is(':checked')总是返回false
- Javascript 下划线每个总是返回 false
- 提交返回 false 总是在 jquery 中
- 为什么 1.2 == true 返回 false 如果布尔值 (1.2) 实际上是真的
- 如果循环中至少有一个元素返回 false,如何将变量设置为 false
- 基本JavaScript不断返回false
- 布尔对象上的逻辑 NOT 在 Javascript 中总是返回 false
- jquery focusin没有'调用.focus()并返回false;时无效;
- Ajax-执行成功前返回false
- jQuery JSON flickr提要返回false不工作