Email,minimum length and required field validation using jquery

Posted by Nithadeepak under jQuery category on 4/26/2011 | Points: 40 | Views : 6257

Post Code |

Search Codes |

Code Home

.aspx page

<head runat="server">
    <title></title>
    <script type="text/javascript" src="JQuery.js"></script>       /* jquery plugin */
    <script type="text/javascript" src="jquery.validate.min.js" ></script>    /* jquery-validation plugin*/
    <script type="text/javascript" src="script1.js"></script>
    <link rel="Stylesheet" type="text/css" href="Style.css" />  
</head>/* you can download the plugins from www.jquery.com */
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Label runat="server" ID="name" Text="Name:"></asp:Label>
    <asp:TextBox ID="txt1" runat="server" /><br />
    <asp:Label runat="server" ID="Label1" Text="Email:"></asp:Label>
    <asp:TextBox  ID="TextBox1" runat="server" /><br />
    <asp:Button ID="btn1" runat="server" Text="Submit" />
    </div>
    </form>
</body>

script1.js

$(document).ready(function() {


    $("#form1").validate({
        //set the rules for the field names
        rules: {
            txt1: {
                required: true,
                minlength: 2
            },
            TextBox1: {
                required: true,
                email: true
            }
        },


        //set messages to appear inline
        messages: {
            txt1:"*",  /* you can also give path of an image instead of * so that that image will display as error message*/
            TextBox1: "*"
        }
        
    });
    
    return false;
});

$(document).ready(function() {
    $("#btn1").click(function() {

        if ($("#form1").validate().element("#txt1") == false) 
            $("#txt1").css("border", "1px solid Red");
            else
                $("#txt1").css("border", "1px solid Black");
            if ($("#form1").validate().element("#TextBox1") == false)
                $("#TextBox1").css("border", "1px solid Red");
            else
                $("#TextBox1").css("border", "1px solid Black");
    });
});

Style.css
/* if there is an error while validating it will by default take the style of .error class */