I have a form and a submit button and a modal. I want to run the modal to show a message if the form has an empty value.

I tried .each to loop and check the form for empty inputs but even when the form is filled up it still returns as empty.

My html form:

  <form id="register_form" role="form" >
    <label >First Name</label>
    <input id="inN"data-error="Enter first name." required>
    <div class="help-block with-errors"></div>
    </div>
    <label>Last Name</label>
    <input id="inL"  data-error="Enter last name." required>
    <div class="help-block with-errors"></div>
    </div>
    </div>
          <label for="inputEmail" class="control-label">Email</label>
          <input type="email" class="form-control" id="inputEmail" data-error="Enter email." required>
          <div class="help-block with-errors"></div>
       </div>
    </div>
</form>

This is my javascript:

$('#register_form').each(function() {
            if ( $(this).val() === '' ){
                console.log($(this).val()); // empty even when form is not
                vm.message = 'One or Two fields are empty. Please fill up all fields'
                document.getElementById("message").textContent=vm.message; // message on the modal
            };


        });

I have a form and a submit button and a modal. I want to run the modal to show a message if the form has an empty value.

I tried .each to loop and check the form for empty inputs but even when the form is filled up it still returns as empty.

My html form:

  <form id="register_form" role="form" >
    <label >First Name</label>
    <input id="inN"data-error="Enter first name." required>
    <div class="help-block with-errors"></div>
    </div>
    <label>Last Name</label>
    <input id="inL"  data-error="Enter last name." required>
    <div class="help-block with-errors"></div>
    </div>
    </div>
          <label for="inputEmail" class="control-label">Email</label>
          <input type="email" class="form-control" id="inputEmail" data-error="Enter email." required>
          <div class="help-block with-errors"></div>
       </div>
    </div>
</form>

This is my javascript:

$('#register_form').each(function() {
            if ( $(this).val() === '' ){
                console.log($(this).val()); // empty even when form is not
                vm.message = 'One or Two fields are empty. Please fill up all fields'
                document.getElementById("message").textContent=vm.message; // message on the modal
            };


        });

• javascript
• jquery
• html
• forms

5 Answers 5

You have to use $('#register_form input').each instead of $('#register_form').each to loop through all the input fields present in form.

Please note that, if you have select box or textarea fields in your real form then this code needs to be modified accordingly. I will also suggest you to look at JQuery Validate plugin which do all these work for you.

$(document).ready(function() {

  $("#submitButton").click(function() {
    ValidateForm();
  });

});

function ValidateForm() {

  var formInvalid = false;
  $('#register_form input').each(function() {
    if ($(this).val() === '') {
      formInvalid = true;
    }
  });

  if (formInvalid)
    alert('One or Two fields are empty. Please fill up all fields');
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="register_form" role="form">
  <label>First Name</label>
  <input id="inN" data-error="Enter first name." required>
  <div class="help-block with-errors"></div>
  </div>
  <label>Last Name</label>
  <input id="inL" data-error="Enter last name." required>
  <div class="help-block with-errors"></div>
  </div>
  </div>
  <label for="inputEmail" class="control-label">Email</label>
  <input type="email" class="form-control" id="inputEmail" data-error="Enter email." required>
  <div class="help-block with-errors"></div>
  </div>
  </div>
  <button id="submitButton">Submit</button>
</form>

try below code

replace jquery selector with below code

$('#register_form input')

you can simply fix it.

 var allInput = $('input');

    $.each(allInput,function(){
     //looping through all input assuming u have one form in the page  u can pass form id and grab input too
    if($(this).val() == ""){
    alert('empty');
//do something append error msgs etc
    } else {
    alert('you can go');
    }

    });

It always show you blank value in text box, because when your JavaScript code execute that time all text box reset, check below image for more details.

<script>
$(document).ready(function() {
$('#signupForm')
    .formValidation({
        framework: 'bootstrap',
        err: {
            container: '#errors'
        },
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            firstName: {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The first name is required'
                    }
                }
            },
            lastName: {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The last name is required'
                    }
                }
            },
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 5 and less than 31 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required'
                    },
                    emailAddress: {
                        message: 'The email address is not valid'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    },
                    different: {
                        field: 'username',
                        message: 'The password cannot be the same as username'
                    }
                }
            },
            gender: {
                validators: {
                    notEmpty: {
                        message: 'The gender is required'
                    }
                }
            },
            bio: {
                validators: {
                    stringLength: {
                        max: 300,
                        message: 'The bio must be less than 300 characters long'
                    }
                }
            }
        }
    })
    .on('err.form.fv', function(e) {
        // Show the message modal
        $('#messageModal').modal('show');
    });
  });
 </script>

Demo