Showing posts with label JQuery. Show all posts
Showing posts with label JQuery. Show all posts

Saturday, 14 December 2013

Validate textbox in jquery using asp.net / how to validate empty textbox in jquery

Introduction:

This article is helps to how to check/Validate Username and Password for login screen using jquery.


 If username and password is given for blank click login button show alert message in jquery

 Designing Page (Source Code):

 <html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Asp Basic Login</title>
    <script src="../../jquery-1.9.1.js" type="text/javascript"></script>
    <style type="text/css">
        .Mandatory
        {
            float: left;
            background-color: Transparent;
            color: red;
            display: inline-block;
            height: 15px;
            margin-left: -10px;
            margin-top: 5px;
            width: 10px;
        }
         
        .Column
        {
            width: 98.5%;
            display: inline-block;
            padding: 5px;
        }
       
        .Column span
        {
            width: 15%;
            float: left;
            padding: 3px;
        }
       
        .Column input[type="text"], .Column input[type="password"]
        {
            width: 25%;
            float: left;
            margin-right: 10px;
        }
       
        .Column input[type="submit"]
        {
            float: left;
            margin-top: -1px;
        }
    </style>
    <script type="text/javascript">
        function ValidateButton() {
            if ($.trim($('#<%= txtUserName.ClientID %>').val()) == "") {
                alert("User Name Required");
                $('#<%= txtUserName.ClientID %>').focus()
                return false;
            }
            else if ($.trim($('#<%= txtpassword.ClientID %>').val()) == "") {
                alert("Password Required");
                $('#<%= txtpassword.ClientID %>').focus()
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="Column">
            <asp:Label ID="lblUserName" runat="server" Text="User Name"></asp:Label>
            <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
            <span class="Mandatory">*</span></div>
        <div class="Column">
            <asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
            <asp:TextBox ID="txtpassword" TextMode="Password" runat="server"></asp:TextBox>
            <span class="Mandatory">*</span></div>
        <div class="Column" style="padding-left: 150px">
            <asp:Button ID="btnLogin" runat="server" BorderColor="Aqua" OnClientClick="javascript:return ValidateButton()"
                Text="Login" /></div>
    </div>
    </form>
</body>
</html>

 Demo:

by trackmyblog.com09:48No comments

Friday, 13 December 2013

Calculate difference between two dates in jquery using asp.net / Difference between two dates in asp.net using jquery

Introduction :

This article helps to calculate difference between two dates in jquery Using asp.net.
First select from date and to date then we calculate no days in between two days. Here i calculate inside the ContentPlaceHolderID(Using Master Page)

Desiging page(Source Code):

    <script type="text/javascript">
        function DateDifference() {
           $('#<%= txtDays.ClientID %>').val('');

           var mySplitStartDate = $('#<%= txtFirstDate.ClientID %>').val().split('-');
           var mySplitEndDate = $('#<%= txtSecondDate.ClientID %>').val().split('-');

var startDate = new Date(mySplitStartDate[2] + "/" + mySplitStartDate[1] + "/" + mySplitStartDate[0]);
var endDate = new Date(mySplitEndDate[2] + "/" + mySplitEndDate[1] + "/" + mySplitEndDate[0]);
           if (!isNaN(endDate)) {
                var timeDiff = endDate - startDate
                var daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
                $('#<%= txtDays.ClientID %>').val(daysDiff);

           }
        }
// Page load event call using asp.net

        $(document).ready(function () {
            DateDifference()
        });
// After Page postback call the event using asp.net
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
        function EndRequestHandler(sender, args) {
            if (args.get_error() == undefined) {
                DateDifference()
            }
        }
   </script>
 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
          <asp:Label ID="lblFirstDate" runat="server" Text="First Date"></asp:Label>
        <asp:TextBox ID="txtFirstDate" TabIndex="-1" runat="server" SkinID="Date_Skin" onchange="javascript:DateDifference();"></asp:TextBox>
        <asp:ImageButton ID="imgbtnCalender" TabIndex="-1" runat="server" SkinID="Calender_Skin" />
        <asp:CalendarExtender ID="ceDate" TargetControlID="txtFirstDate" Format="dd-MMM-yyyy"
            PopupButtonID="imgbtnCalender" runat="server">
        </asp:CalendarExtender>
          <asp:Label ID="lblSecondDate" runat="server" Text="Second Date"></asp:Label>
        <asp:TextBox ID="txtSecondDate" TabIndex="-1" runat="server" SkinID="Date_Skin" onchange="javascript:DateDifference();"></asp:TextBox>
        <asp:ImageButton ID="imgSecondCalender" TabIndex="-1" runat="server" SkinID="Calender_Skin" />
        <asp:CalendarExtender ID="ceSecondDate" TargetControlID="txtSecondDate" Format="dd-MMM-yyyy" PopupButtonID="imgSecondCalender" runat="server">
        </asp:CalendarExtender>
           <asp:Label ID="lblDays" runat="server" Text="No of Days"></asp:Label>
        <asp:TextBox ID="txtDays" runat="server" Width="100px" Enabled="false"></asp:TextBox>
        <asp:FilteredTextBoxExtender ID="FeDays" runat="server" FilterMode="ValidChars" FilterType="Custom" TargetControlID="txtDays" ValidChars=".0987654321">
        </asp:FilteredTextBoxExtender>
    
</asp:Content>

Demo :

by trackmyblog.com09:43No comments
Subscribe to: Posts (Atom)