Общее количество элементов, представленных в форме - jQuery

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> 

Примечание: В настоящее время Submit кнопка отключена.
Так что если все поля формы заполнены, кнопка отправки будет включена.

В настоящее время, если я пытаюсь получить протяженность формы таким образом, она всегда дает мне 1 вместо 3.

Пожалуйста, помогите.

Answer 1

Вы используете функцию error_fields, которая проверяет количество элементов для каждого элемента в .check_field отдельно. Итак, конечно .length вернется 1.

---

пожалуйста, смотрите в delegated events, чтобы спасти себя от связывания, что размывание-обработчик событий для каждого отдельного элемента ввода.

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

Попробуйте это:

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

Answer 3

Вы можете изменить свой код, как следовать

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