JavaScript Date Validation on submit

Question

I have here my simulation of my actual code.

What I need to do is that if the date format is not valid, it should return false and will not submit.

function validateDate(DateField) {
     var regDate = /^([0-9]{2})\.([0-9]{2})\.([0-9]{4})$/;

     if(DateField.value.length > 0) {
         if(regDate.test(DateField.value) == false) {
             alert('Date Format should be dd.mm.yyyy!');
             document.getElementById("lblTest").style.color = "red";
             return false;
         } else {
             document.getElementById("lblTest").style.color = "black"
             return true;
         }
     } else {
         document.getElementById("lblTest").style.color = "black";
         return true;
     }
 }
  
  $("#submit").click(function(){
    //condition should be here but right now I dont know what this should be
  });

<form method="post">
    <label id="lblTest">Date</label>
    <input type="test" placeholder="dd.mm.yyyy" id="txtDate" onblur="validateDate(this);">
    <input type="button" id="submit" formaction="www.google.com" value="Submit">
</form>

http://stackoverflow.com/questions/15491894/regex-to-validate-date-format-dd-mm-yyyy — Bálint, Mar 14 '17 at 09:15
The label should be associated with the input using a *for* attribute. The input must have a name or it won't be submitted. The date validation regular expression does not validate that it's a valid date, just that it meets a very general pattern. — RobG, Mar 14 '17 at 13:05

score 1 · Answer 1 · answered Mar 14 '17 at 09:17

1

You can handle submit event. And if validation not pass return false:

$('form').submit(function(){
    //validate here
})

answered Mar 14 '17 at 09:17

Alex Slipknot

2,439
1
18
26

currently i dont know what the code should be :) – Grinex Mar 14 '17 at 09:20
just put there `return validateDate(document.getElementById('txtDate'))` – Alex Slipknot Mar 14 '17 at 09:23

Akshay Patwa · Answer 2 · 2017-03-14T09:41:41.883

0

Better you use HTML5 Date type input and parse the date in format you want.. That would be much convenient way of doing this..

UPDATE

Here is input Box :

<input type="date" onBlur="fngetDate(this.value)">

Here is Code To Parse It:

    function fngetDate(val){ 
var dateEntered = new Date(val); var myFormat = dateEntered.getDate() + '.'+dateEntered.getMonth()+'.'+dateEntered.getFullYear(); alert(myFormat); }

edited Mar 14 '17 at 09:41

answered Mar 14 '17 at 09:14

Akshay Patwa

13
4

if so sir, can you give me a code with html5 date input? because i tried it and i cant format the date type on dd.mm.yyyy – Grinex Mar 14 '17 at 09:16
Here is input Box : Here is Code To Parse It: function fngetDate(val){ var dateEntered = new Date(val); var myFormat = dateEntered.getDate() + '.'+dateEntered.getMonth()+'.'+dateEntered.getFullYear(); alert(myFormat); } – Akshay Patwa Mar 14 '17 at 09:39
Hi, thanks for this but it is not working on my end. still mm.dd.yyyy is the format shown. – Grinex Mar 14 '17 at 09:56

Sunil B N · Answer 3 · 2017-03-15T04:44:56.320

0

If chrome is the only target browser:

Use date type input <input type="date">

Else Use pattern <input type="text" pattern="yourRegEx" required>

<form method="post">
    <label id="lblTest">Date</label>
    <input type="date" required>
    <br>
    <label>another Date</label>
    <input type="text" required pattern="(0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}" value="" id="dates_pattern0" placeholder="dd.MM.YYYY">
    <input type="text" formaction="www.google.com" value="Submit">
</form>

Working JSFiddle here: https://jsfiddle.net/0ay8jkx4/2/

edited Mar 15 '17 at 04:44

answered Mar 14 '17 at 09:17

Sunil B N

4,159
1
31
52

i have already tried it. but date appears in format of mm.dd.yyyy. – Grinex Mar 14 '17 at 09:21
check the answer now.. – Sunil B N Mar 14 '17 at 09:24
Hi. Thanks for this but you put required on the date field. – Grinex Mar 14 '17 at 09:54

score 0 · Accepted Answer · answered Mar 14 '17 at 09:23

Try this code

function validateDate(DateField) {
    var regDate = /^([0-9]{2})\.([0-9]{2})\.([0-9]{4})$/;

    if(DateField.value.length > 0) {
        if(regDate.test(DateField.value) == false) {
            alert('Date Format should be dd.mm.yyyy!');
            document.getElementById("lblTest").style.color = "red";
        $('#submit').attr('disabled', 'disabled');

            return false;
        } else {
            document.getElementById("lblTest").style.color = "black"
        $('#submit').attr('disabled', false);
            return true;
        }
    } else {
        document.getElementById("lblTest").style.color = "black";
    $('#submit').attr('disabled', false);
        return true;
    }
}

here,enable or disable submit button based on date validation

this is not exactly what i wanted. but it works! thanks for this :) — Grinex, Mar 14 '17 at 09:59

score -1 · Answer 5 · answered Mar 14 '17 at 09:38

-1

just do this

$("form").submit(function(){
    return validateDate(document.getElementById("txtDate"));
});

and of course you should fix your regex to:

^(([0-2]{0,1}[1-9]{1})|(3{0,1}[0-1]{0,1}))\.((0[1-9])|(1[0-2]))\.((19[0-9][0-9])|(20((0[0-9])|(1[0-7]))))$

answered Mar 14 '17 at 09:38

Rashed Addosary

71
7

can you explain your regex sir? – Grinex Mar 14 '17 at 09:53
This returns true for '31.02.2017', so not particularly good at validating a date. – RobG Mar 14 '17 at 13:02

JavaScript Date Validation on submit

5 Answers5