jquery textbox date format check

I'm using jquery, bootstrap, jquery.validate in my asp.net MVC 5 application.
I have seeing various solutions but not sure a good stable solution.

In a textbox the value it contains on page load is a date in this format 11/05/2017

Is there a way to do the following. Wether it's with jquery or JavaScript or bootstrap or validate,

If the value contained in the textbox is anything besides a date display a tooltip that says "please enter a date in this format MM/DD/YYYY"

So if I click in the textbox and , if I delete one digit and the text looks like this 11/05/201  at that point the tooltip already appears. If I type the digit back in like this 11/05/2017 the tooltip disappears.

So the tooltip only appears when the textbox value is anything besides a date in this format MM/DD/YYYY
LVL 1
maqskywalkerAsked:
Who is Participating?
 
Leonidas DosasCommented:
Check this script.It use a function that split the string in your input element and then returns a date variable. In the var in not "Invalid Date" and the string length is equal to 10 then the bootstrap  tooltip is hiding.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript">
	
</script>
</head>

<body>

<input type="text" id="myText" rel="txtTooltip" title="**Your Title**" data-toggle="tooltip" data-placement="bottom">

 <script>
 
    function parseDMY(value) {
    var date = value.split("/");
    var d = parseInt(date[0], 10),
        m = parseInt(date[1], 10),
        y = parseInt(date[2], 10);
    return new Date(y, m - 1, d);
}


$("#myText").on("keyup", function() {
    if (this.value.length !==10 && parseDMY(this.value)!=='Invalid Date') {
        $(this).tooltip("show");
    } else {
        $(this).tooltip("hide");
    }
}).tooltip({
    placement: "right",
    trigger: "focus"
});
</script>
</body>
</html>

Open in new window

0
 
maqskywalkerAuthor Commented:
Thanks! Elegant solution!
0
 
maqskywalkerAuthor Commented:
Leonidas,

I noticed the tooltip displays as soon as i click in the textbox.

So i looked at this line trigger: "focus"

if i set the default value on the textbox to a good format like this which is 10 digits:   11/05/2017

what's the trigger so the tooltip launches when I click in the textbox and change the text from 10 digits to 9 digits like this: 11/05/201
0
 
Leonidas DosasCommented:
With a default value  add this in script additionally with the previous:
$("#myText").focus(function() {
    if (this.value.length !==10 && parseDMY(this.value)!=='Invalid Date') {
        $(this).tooltip("show");
    } else {
        $(this).tooltip("hide");
    }
}).tooltip({
    placement: "right",
    trigger: "focus"
});

Open in new window

0
 
maqskywalkerAuthor Commented:
perfect!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.