Learning jQuery

Well, 5 days back I received an mail from one of my reader, in which he had written that "I need to validation html page using Jquery by looping through Class attributes ["Class=Required"] if the label attribute contain "required" class then i should validate the alert the user "Please Enter your value" and set back the focus to null control to enter the value. Please suggest how to do this in Jquery coding".

Note: I did not write the name of the blog reader because I am not sure if he wants his name here or not.

He has a single HTML form with inputs like Name, Company, Job Title, Phone and Email. And on click of Submit, he wanted to validate the inputs which has "class=required". So I have created a demo page for his problem and send him the solution.

Below is the jQuery code, which solves his problem. On click of Submit button, it iterates through all the input type which has ".required" class. And checks the value, if it is empty then display an alert and set focus to the textbox.

$(document).ready(function(){
    $('#btnSubmit').click(function(){
        $("input.required").each(function(){
            if($(this).val().length == 0)
            {
               alert('Please Enter your value');
               $(this).focus(); 
               return false;
            }
        });
        //else submit your form.
    });
});

Then very next day I received another email from him saying " I need to achieve through JQuery Validation, <Label> tag has the "class.required" attributes not the <Input> tag, those lable tag(s) has the "class.required" attributes only those needs to validates during use click the comman button and this JQuery script should be used globally across the website."

So his problem was the label tag is having the class "required", not the input tag. The solution which I have provided to him assuming that input tags has the required class as he has not mentioned that the label tag has the ".required" class in his first email. In his next email, he had also sent me the HTML code. First take a look at HTML code. (I have not put the whole code.)

<div class="formField">
   <label for="txtFullName" class="required">Name</label> 
   <input id="txtFullName"  type="text" name="Full_Name" />   
</div>

He was using class ".reuqired" with label along with HTML for attribute. The for attribute specifies which form element a label is bound to. So it put me in thoughts for 2 mins but I found a solution. This time, I was iterating through all the label which has ".required" class. And also getting the value of for attribute. As the for attribute value is same as the textbox id. So based on the for attribute value, I created object using jQuery selectors. And rest is equal to previous solution.

$(document).ready(function(){
    $('#btnSubmit').click(function(){
        var bSubmit = true;
        $("label.required").each(function(){
            var txtAttrb = $(this).attr('for');
            if(txtAttrb.length > 0)
            {
                var txtVal = $("input[id=" + txtAttrb + "]");
                if(txtVal.val().length == 0)
                {
                   alert('Please Enter your value');
                   txtVal.focus(); 
                   bSubmit = false;
                   return false;
                }
            }
        });
        
        if(bSubmit == true)
        {
            //submit the form.
        }
    });
});

Hope this helps you as well. If you are also stuck somewhere and need any help for jQuery, Please contact us.

Feel free to contact me for any help related to jQuery, I will gladly help you.