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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.