jQuery check empty field doesn't check all fields

For example, I'm using the script below to check for empty fields :

$('a.submit').click(function() {
 if ($('.LoginData').val() == "")  {
  $('input:text[value=""]').attr('style', 'border-color:#FF0000开发者_C百科;');
 } else {
  $(this).parents('form').submit();
 }
});

All the input elements have the class LoginData, so I used the jQuery class selector which selects all the elements containing that class. However, when the if condition finds a field that isn't blank, it just stops there.

I think its a normal behavior for if statements, are there any alternative to this?

Thanks.

".val()" only has one return value -- it can only give you the value of one element; That one will be the first element on the $() collection.

$('a.submit').click(function() 
{
  var ok = true;
   $('.LoginData').each(function() 
   {  
       if($(this).val() == "")  
       { 
              $(this).attr('style', 'border-color:#FF0000;'); 
              ok = false;
       }
   }
   if (ok)
   {
      $(this).parents('form').submit(); 
   } 
});

Your code is currently only looking at the first element. You'll need to use .each() in conjunction with your check to make sure that it's going as planned.

Also your loop in it's current state will immediately submit the form if the field is not empty.

val() only returns the value of the first matched element, so you can't use this to verify if the form is filled out.

You need to use the jQuery.each() method to iterator over the '.loginData' items.

A good solution would be to use the each method, attach a class to the elements that are empty (something like validate-empty). This can be used to attach a style to an element that shows the user that it is required (just like you are doing above, but with a defined class). Then you can check the form, something like $('#my-form .validate-empty').size() == 0 to see if there are errors before submitting.

you need to use each()

I noticed that this does not work in Chrome (it always submits form), so you need to add:

  event.preventDefault();

Like this:

$('a.submit').click(function() 
{
  event.preventDefault();
  var ok = true;
   $('.LoginData').each(function() 
   {  
       if($(this).val() == "")  
       { 
              $(this).attr('style', 'border-color:#FF0000;'); 
              ok = false;
       }
   }
   if (ok)
   {
      $(this).parents('form').submit(); 
   } 
});

Why are you using .click() to begin with? I would suggest you use .submit() if you want to use jQuery to submit a form (read the jQuery docs for more info on .submit()). And as other users are saying, you can use the .each() function to iterate over all the input fields. Here is how I would do it:

$("#form").submit(function(event){
        $(".classForAllInput").each(function(index) {
          if ($(this).val() == 0) {
              $("#error").css({"display": "inline"}).text("Some of the fields are empty");
              event.preventDefault();
          }
        });
    });

The jQuery function .each() will iterate over all the input fields and if anyone of them is empty the error message will be displayed (provided that you have a area to display an error ID to ).

Here is another method. Also the form does not submit on chrome so it does not behave as SomeoneS's describes without having the prevent.default right off the bat.

<script type="text/javascript">
    $('#ctl00_PlaceHolderMain_changeRequestbtnSave').click(function (e) {
        var valid = true;
        //check all inputs within a parent div)
        $('.requiredfield input').each(function () {
            //check if values is null
            if ($(this).val() == "") {
                $(this).addClass('requiredflag');
                valid = false;
            }
        })
        if(!valid) {
            e.preventDefault();
        }
    });
</script>

Remember that this needs to go at the very bottom of your html if you are not using document.ready

My styles are below:

<style>
.requiredflag {
    border: 1px solid red;
}
.requiredfield:after {
    content: "*";
    font-weight: bold;
    color: red;
}
</style>