Question

我正在制作一个表单验证函数并卡在一个地方，以解决我想要获得表单和表格中存在的表单元素总数的问题。我还想检查是否所有表单元素都已填充。
函数在模糊事件中被调用，下面是我的代码：

(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>

注意：当前“提交”按钮已停用因此，如果首先填写表单字段，则会启用提交按钮。

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

请帮忙。

Answer 1

您正在运行error_fields功能，该功能会分别检查.check_field中每个元素的项目数。因此，.length当然会返回1。

请查看delegated events以避免将blur-event-handler绑定到每个不同的输入元素。

$(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');
  });
});

Answer 2

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

 $.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>

Answer 3

试试这个：

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

你可以找到在小提琴上运行的例子：

Code at JSFiddle

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

3 个答案: