jQuery表单验证插件：错误返回false

Question

在阅读了有关如何制作 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

我尝试了什么

<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();，其余的事情就由它来处理。

Answer 1

在下面的代码中查看我使用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;       
}

Answer 2

当你调用 $.border 函数时，你是否尝试过重置 cnt 变量？