CODEWITHSUNDEEP
jquery
Dheeraj Agrawal
Dheeraj Agrawal

Reputation: 2357

Total number of elements present in a form - jQuery

I am making a form validation function and stuck in a place, to solve the problem I want to get the total number of form elements present in a form & also I want to check if all form elements are filled or not.
Function is being called in blur event, below is my code:

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

Note: Currently Submit button is disabled.
So if above all form fields are filled submit button will be enabled.

Currently if I try to get length of form this way it always gives me 1 instead of 3.

Please help.

Upvotes: 1

Views: 5124

Answers (3)

Deepak Goyal
Deepak Goyal

Reputation: 1216

You can modify your code as follow 

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

Upvotes: 2

anantkpal
anantkpal

Reputation: 100

Try this out :

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

You can find example running at fiddle:

Code at JSFiddle

Upvotes: 1

rodneyrehm
rodneyrehm

Reputation: 13557

You are running the error_fields function, which checks the number of items, for each element in the .check_field seperately. So of course .length will return 1.

please look into delegated events to save yourself from binding that blur-event-handler to every distinct input element.

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

Upvotes: 3

Related Questions