Validation of HTML controls using JQuery onblur and onsubmit

<!--Author : Taher_JavaHunter-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../js/jquery-1.4.3.min.js"></script>
        <script type="text/javascript">
            function validate(){
                var tbool=true;
                if(!txtBoxEmpty($('#txt1'), 10,1)){
                   tbool = false;
                }
                if(!txtBoxEmpty($('#opt1'), 0,2)){                    
                   tbool = false;
                }
                return tbool;
            }            

            function txtBoxEmpty(control,length,srno){
                var tbool=true;
                $(".err"+srno).remove();
                if($.trim($(control).val())==''){
                    $(control).parent().append("<div class='err"+srno+"' style='color:red;'>Please Enter Value</div>");
                    tbool = false;
                }else{
                    if(length!=0){
                        if($(control).val().length>length){
                            $(control).parent().append("<div class='err"+srno+"' style='color:red;'>Max "+length+" Characters Allowed</div>");
                            tbool = false;
                        }
                    }
                }
                return tbool;
            }
        </script>
    </head>
    <body>
        <form>
            <table border="5" align="center">
                <tr>
                    <td>Name : </td>
                    <td>
                        <input type="text" id="txt1" onblur="txtBoxEmpty(this,10,1)"/>
                    </td>                    
                </tr>
                <tr>
                    <td>Category : </td>
                    <td>
                        <select id="opt1" onchange="txtBoxEmpty(this,0,2)">
                            <option value="">--Select--</option>
                            <option value="A">A</option>
                            <option value="B">B</option>
                            <option value="C">C</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" value="Submit" id="sButton" onclick="return validate();"/>
                    </td>
                </tr>

            </table>
        </form>
    </body>
</html>
Advertisements
This entry was posted in JQuery. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s