CODEWITHSUNDEEP
javascriptjqueryasp.net
durga siva kishore mopuru
durga siva kishore mopuru

Reputation: 1347

How to validate when enter date in TextBox in asp.net using JQuery?

This is my code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="datetime.WebForm1" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("[id$=txtDate]").datepicker({});
            $("#txtDate").blur(function () {
                val = $(this).val();
                val1 = Date.parse(val);

                if (isNaN(val1) == true && val !== '') {
                    alert('Date is not valid');
                    $("#txtDate").val($.datepicker.formatDate("mm-dd-yy", new Date()));
                }
                else {
                    console.log(val1);
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
    </form>
</body>
</html>

In the above code i have a textbox when user click on textbox it opens datepicker and select date. if user enter date manually how to validate using jquery. Eg:- 01011 --> this time shows alert for invalid date Eg:- 01-01-2016

Upvotes: 0

Views: 3683

Answers (3)

durga siva kishore mopuru
durga siva kishore mopuru

Reputation: 1347

This is the final code for datetime in asp.net using jquery

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="datetime.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
   <link type="text/css" href="Content/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
     <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
     <script src="Scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
  <%--  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />--%>
    <script type="text/javascript">
        $(function () {
            $("#txtDate").datepicker({ dateFormat: "dd/mm/yy" });
            //Bind keyup/keydown to the input
            $("#txtDate").bind('keyup', 'keydown', function (e) {

                //To accomdate for backspacing, we detect which key was pressed - if backspace, do nothing:
                if (e.which !== 8) {

                    var length = $("#txtDate").val().length;
                    if (length == 2) {
                        if ($("#txtDate").val().charAt($("#txtDate").val().length - 1) == '/') {
                            $("#txtDate").val("0" + $("#txtDate").val().substring(0, 1));
                        }
                        var date = $("#txtDate").val().substring(0, 2);
                        if (date > 31) {
                            $("#txtDate").val("");
                        }
                    }

                    else
                        if (length == 5) {
                            if ($("#txtDate").val().charAt($("#txtDate").val().length - 1) == '/') {
                                $("#txtDate").val($("#txtDate").val().substring(0,3)+ "0" + $("#txtDate").val().substring(3, 4));
                            }
                            var month = $("#txtDate").val().substring(3, 5);
                            if (month > 12) {
                                $("#txtDate").val($("#txtDate").val().substring(0, 2));
                            }
                        }
                    if (length > 6) {
                        if ($("#txtDate").val().charAt($("#txtDate").val().length - 1) == '/') {
                            $("#txtDate").val($("#txtDate").val().substring(0, length-1));
                        }
                    }
                        
                            var numChars = $("#txtDate").val().length;

                            if (numChars === 2 || numChars === 5) {
                                var thisVal = $("#txtDate").val();
                                thisVal += '/';
                                $("#txtDate").val(thisVal);
                            }
                  
                }
            });
            $("#txtDate").val($.datepicker.formatDate("dd/mm/yy", new Date()));
            $("#txtDate").blur(function () {
                
                val = $(this).val();
                val1 = Date.parse(val);
                if (isNaN(val1) == true && val !== '') {
                    alert('Date is not valid');
                    $("#txtDate").val($.datepicker.formatDate("dd/mm/yy", new Date()));
                }
                else {
                    console.log(val1);
                }
            });
      
        });
	</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="txtDate" runat="server" MaxLength="10" type="date"></asp:TextBox>
    &nbsp;&nbsp;&nbsp;
        <br />
        <br />
        <br />
    </div>    
    </form>
</body>
</html>

Upvotes: 0

Lokesh_Ram
Lokesh_Ram

Reputation: 391

Try validating the date using regex,this below expression will accept all the possible 3 formats dd/mm/yyyy,dd-mm-yyyy or dd.mm.yyyy.

Jquery:

$("#txtDate").datepicker();
$("#txtDate").blur(function () {

var pattern = /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/;

var validateDate = pattern.test($(this).val());

if(validateDate)
{
 alert('Date is valid');
}
else
{
alert('Date is not valid');
}
)};

Upvotes: 1

FDavidov
FDavidov

Reputation: 3675

You may wish to change to type="date" which is specially provided for entering dates.

Upvotes: 1

Related Questions