Question

i have a form like this

name

i want to do this validation for empty fields when the user clicks on the submit button he should get an error MSG listing all empty fields that are empty on top of the form with the error element if empty being highlighted how can i do this using j query. can anyone help me on this thanks for Ur response

Answer 1

I think this may be same what you need.

HTML

<div id="msg"></div>
<form class="frm" action="javascript:alert('success!');">
    <div>
      field 1:<textarea class="name" id="required" name="field1"></textarea><br />
      field 2:<textarea class="address" id="not_required" name="field2"></textarea><br />
      field 3:<textarea class="email" id="required" name="field3"></textarea><br />      
      <input type="submit" />
    </div>
</form>

Javascript

$(document).ready(function(){
       $(".frm").submit(function() {
          var flag = 0;      
          $("#msg").html("");
          $("div #required").each(function(){
            if($(this).val()==""){            
                flag = 1;
                $(this).css("background","red");
                $("#msg").append($(this).attr("name")+" null! <br/>");
            }else
                $(this).css("background","white");
          });
          if(flag==0)
            return true;
          return false;
        }); 
    });

Usage: just add the id="required" in form elements which you want to validate.

Example on JsFiddle: http://jsfiddle.net/blackship/TarGv/4/

Good luck!