Wednesday 10 December 2014

Jquery Login Validation

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>

<!DOCTYPE html>
<html lang="en">
  <head>
  <title> Login </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
    <link rel="stylesheet" type="text/css"  href="css/smart-forms.css">  
    <link rel="stylesheet" type="text/css"  href="css/font-awesome.min.css">
   
      <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="js/additional-methods.min.js"></script>
    <!--[if lte IE 9]>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>  
        <script type="text/javascript" src="js/jquery.placeholder.min.js"></script>
    <![endif]-->  
   
    <!--[if lte IE 8]>
        <link type="text/css" rel="stylesheet" href="css/smart-forms-ie8.css">
    <![endif]-->
     
</head>
     
    <script type="text/javascript">

        $(function () {

            /* @custom validation method (smartCaptcha)
            ------------------------------------------------------------------ */

            $.validator.methods.smartCaptcha = function (value, element, param) {
                return value == param;
            };

            $("#smartform").validate({

                /* @validation states + elements
                ------------------------------------------- */

                errorClass: "state-error",
                validClass: "state-success",
                errorElement: "em",

                /* @validation rules
                ------------------------------------------ */

                rules: {
                    username: {
                        required: true
                    },
                    password: {
                        required: true
                    },
                    Site: {
                        required: true,
                       
                    },                  

                },

                /* @validation error messages
                ---------------------------------------------- */

                messages: {
                    username: {
                        required: 'Enter user name'
                    },
                    password: {
                        required: 'Enter Password'
                    },
                    Site: {
                        required: 'Enter WebSite',
                     
                    },
                   

                },

                /* @validation highlighting + error placement
                ---------------------------------------------------- */

                highlight: function (element, errorClass, validClass) {
                    $(element).closest('.field').addClass(errorClass).removeClass(validClass);
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).closest('.field').removeClass(errorClass).addClass(validClass);
                },
                errorPlacement: function (error, element) {
                    if (element.is(":radio") || element.is(":checkbox")) {
                        element.closest('.option-group').after(error);
                    } else {
                        error.insertAfter(element.parent());
                    }
                }

            });

        });

    </script>
<body class="woodbg">

<div class="smart-wrap">
    <div class="smart-forms smart-container wrap-3">
       
        <div class="form-header header-primary">
            <h4><i class="fa fa-sign-in"></i>Login</h4>
          </div><!-- end .form-header section -->
           
            <form  id="smartform" runat="server">
            <div class="form-body">            
                 
             
                    <div class="section">
                        <label for="username" class="field prepend-icon">
                            <input type="text" name="username" id="username" class="gui-input" placeholder="Enter username" runat="server">
                            <label for="username" class="field-icon"><i class="fa fa-user"></i></label>
                        </label>
                    </div><!-- end section -->                  
                   
                <div class="section">
                    <label for="password" class="field prepend-icon">
                        <input type="password" name="password" id="password" class="gui-input" placeholder="Enter password" runat="server">
                            <label for="password" class="field-icon"><i class="fa fa-lock"></i></label>
                        </label>
                    </div><!-- end section -->
                     
                        <div class="section ">
                            <label class="field select">
                                <select id="Site" name="Site" runat="server">
                                    <option value="">Select Website</option>
                                    <option value="1">OPT</option>
                                    <option value="2">Portal</option>                                  
                                </select>

                                <i class="arrow double"></i>
                            </label>
                        </div>
                <div class="section">
                        <label class="switch block">
                            <input type="checkbox" name="remember" id="remember" checked runat="server">
                            <label for="remember" data-on="YES" data-off="NO"></label>
                            <span> Keep me logged in ?</span>
                        </label>
                    </div><!-- end section -->                                                          
                   
                </div><!-- end .form-body section -->
                <div class="form-footer">
                    <asp:Button runat="server" class="button btn-primary" id="btnSubmit" OnClick="btnSubmit_Click" Text="Sign in" />
                <asp:Label ID="lblStatus" ForeColor="Red" runat="server" Text="Invalid Credentials" Visible="false"></asp:Label>
                </div><!-- end .form-footer section -->
            </form>
           
        </div><!-- end .smart-forms section -->
    </div><!-- end .smart-wrap section -->
   
    <div></div><!-- end section -->

</body>
</html>

No comments:

Post a Comment