表单中存在的元素总数-jQuery

我正在做一个表单验证函数，并被卡在一个地方，为了解决这个问题，我想得到表单中存在的表单元素的总数&同时我想检查是否所有表单元素都已填充
在模糊事件中调用函数，下面是我的代码：

(function($){
    $.fn.da_form_validation = function(options){        
        var error_fields = function(){
            var form_element_length = $(this).length;
            alert(form_element_length);
        };

        return this.each(function(){
            $(this).blur(error_fields);
        });
    };
})(jQuery);

$(".check_field").da_form_validation();

<form name="sample_form" method="post">
    <input class="check_field" type="text" name="first_name" id="first_name" value="" />
    <input class="check_field" type="text" name="last_name" id="last_name" value="" />
    <textarea class="check_field" name="address" id="address"></textarea>
    <input type="submit" name="submitbtn" id="submitbtn" value="Submit" disabled="disabled" />
</form>

（函数（$）{
$.fn.da_form_validation=函数（选项）{
var error_fields=函数（）{
var form_element_length=$（this）.length；
警报（形式元素长度）；
};
返回此值。每个（函数（）{
$（此）.blur（错误字段）；
});
};
})（jQuery）；
$（“.check_field”）.da_form_validation（）；

注意：当前提交按钮已禁用。
所以，如果上述所有表单字段都已填写，则将启用提交按钮

目前，如果我试图以这种方式获得表单的长度，它总是给我1而不是3

---

请提供帮助。

您正在运行

error\u fields

功能，该功能检查

中每个元素的项目数。分别检查\u field

。所以当然

.length

将返回

1

---

请查看以避免将模糊事件处理程序绑定到每个不同的输入元素

$(function(){
  // register handler once!
  $('form').on('blur', 'input, select, textarea', function(){
    // handle blur for all input elements of the form

    // this refers to the form
    alert($(this).find('input, select, textarea').length + ' input-elements in form');
  });
});

---

您正在运行

error\u fields

函数，该函数检查

中每个元素的项数。分别检查\u fields

。所以当然

.length

将返回

1

---

请查看以避免将模糊事件处理程序绑定到每个不同的输入元素

$(function(){
  // register handler once!
  $('form').on('blur', 'input, select, textarea', function(){
    // handle blur for all input elements of the form

    // this refers to the form
    alert($(this).find('input, select, textarea').length + ' input-elements in form');
  });
});

试试这个：

 $('.check_field').on('blur',function(){
    var allFilled=true;
    $('.check_field').each(function(){
       if($(this).val()===''){
      allFilled=false;
       return;
     }
   });
   if(allFilled){
      $('#submitbtn').removeAttr("disabled");
   }
 });​

您可以在fiddle上找到运行的示例：

试试这个：

 $('.check_field').on('blur',function(){
    var allFilled=true;
    $('.check_field').each(function(){
       if($(this).val()===''){
      allFilled=false;
       return;
     }
   });
   if(allFilled){
      $('#submitbtn').removeAttr("disabled");
   }
 });​

您可以在fiddle上找到运行的示例：

---

您可以按如下方式修改代码

 $.fn.da_form_validation = function(options){        
        var error_fields = function(){

          var totalElements = jQuery('.check_field').length;
            var form_element_length = $(this).length;

              if($(this).val() == "") {

                form_element_length = $(this).attr('title');
                 $('#submitbtn').attr("disabled", 'disabled');
                alert(form_element_length);


              }
            var allFilled= true ;
            $('.check_field').each(function(){
              if($(this).val()===''){
              allFilled=false;
              }
           });

            if(allFilled){
              $('#submitbtn').removeAttr("disabled");
            }
            allFilled=false;
        }

        return this.each(function(){
            $(this).blur(error_fields);

        });
    };



  $(".check_field").da_form_validation();


});
</script>

<form name="sample_form" method="post">
    <input class="check_field" type="text" name="first_name" id="first_name" value="" title="Please Fill first name" />
    <input class="check_field" type="text" name="last_name" id="last_name" value="" title="Please Fill last name" />
    <textarea class="check_field" name="address" id="address" title="Please Fill addres"></textarea>
    <input type="submit" name="submitbtn" id="submitbtn" value="Submit" disabled="disabled" />
</form>

$.fn.da_form_validation=函数（选项）{
var error_fields=函数（）{
var totalElements=jQuery（'.check_字段'）。长度；
var form_element_length=$（this）.length；
if（$（this）.val（）==“”）{
form_element_length=$（this.attr（'title'）；
$（'#submitbtn'）.attr（“禁用”，“禁用”）；
警报（形式元素长度）；
}
var-allFilled=true；
$（'.check_字段'）。每个（函数（）{
if（$（this.val（）=''）{
allFilled=false；
}
});
如果（全部填写）{
$（'submitbtn'）.removeAttr（“禁用”）；
}
allFilled=false；
}
返回此值。每个（函数（）{
$（此）.blur（错误字段）；
});
};
$（“.check_field”）.da_form_validation（）；
});

您可以按如下方式修改代码

 $.fn.da_form_validation = function(options){        
        var error_fields = function(){

          var totalElements = jQuery('.check_field').length;
            var form_element_length = $(this).length;

              if($(this).val() == "") {

                form_element_length = $(this).attr('title');
                 $('#submitbtn').attr("disabled", 'disabled');
                alert(form_element_length);


              }
            var allFilled= true ;
            $('.check_field').each(function(){
              if($(this).val()===''){
              allFilled=false;
              }
           });

            if(allFilled){
              $('#submitbtn').removeAttr("disabled");
            }
            allFilled=false;
        }

        return this.each(function(){
            $(this).blur(error_fields);

        });
    };



  $(".check_field").da_form_validation();


});
</script>

<form name="sample_form" method="post">
    <input class="check_field" type="text" name="first_name" id="first_name" value="" title="Please Fill first name" />
    <input class="check_field" type="text" name="last_name" id="last_name" value="" title="Please Fill last name" />
    <textarea class="check_field" name="address" id="address" title="Please Fill addres"></textarea>
    <input type="submit" name="submitbtn" id="submitbtn" value="Submit" disabled="disabled" />
</form>

$.fn.da_form_validation=函数（选项）{
var error_fields=函数（）{
var totalElements=jQuery（'.check_字段'）。长度；
var form_element_length=$（this）.length；
if（$（this）.val（）==“”）{
form_element_length=$（this.attr（'title'）；
$（'#submitbtn'）.attr（“禁用”，“禁用”）；
警报（形式元素长度）；
}
var-allFilled=true；
$（'.check_字段'）。每个（函数（）{
if（$（this.val（）=''）{
allFilled=false；
}
});
如果（全部填写）{
$（'submitbtn'）.removeAttr（“禁用”）；
}
allFilled=false；
}
返回此值。每个（函数（）{
$（此）.blur（错误字段）；
});
};
$（“.check_field”）.da_form_validation（）；
});