/    Sign up×
Community /Pin to ProfileBookmark

Help please test() method to validate the date against a regular expression

I have wrote this and my teacher says my function is correct but when I asked her why it does not work instead of telling my what I did wrong she offered to let me do this with out using regular expression. I would like to know what I have done wrong. this is what the assignment was

Create a Web page that contains a text box in which users can enter a date. Also include a button that executes the test() method to validate the date against a regular expression. Write a regular expres-sion pattern that allows users to enter a one- or two- digit month, one- or two- digit date, and two- or four- digit year. Also, allow users to separate the month, date, and year by using either dashes or for-ward slashes. Users should be able to enter any of the following date formats: 11- 2- 07, 1- 25- 2007, or 01/ 25/ 2007.

This is what I have

[code=html]
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>validate Date</title>
<script>

function validateDate() {
var datePattern = /^d{1,2}[/-]d{1,2}[/-]d{2,4}$/;
var date = document.getElementById(“date”).value;
document.writeln(date);
if (datePattern.test(date))
document.write(“<b>VALID DATE</b>”);
else
document.write(“<b>INVALID DATE</b>”);
}
</script>
</head>

<body>
<form name=”date”>
Date: <input Type=”text” name=”value” size=”18″ /><br />
<input type=”button” value=”test” onclick=”validateDate()” />
</form>

</body>
</html>
[/code]

to post a comment
JavaScript

5 Comments(s)

Copy linkTweet thisAlerts:
@rootNov 30.2014 — 
  • 1. document.writeln and document.write are outdated methods, if your teacher is teaching you to use those methods, then they need to go back to school themselves and learn how to populate a DOM Tree element like an [B]<input>[/B] tag or a [B]<div>[/B] element or just use [B]console.log()[/B] to output information to the log that can be viewed by pressing [B]F12[/B].


  • 2. You are missing the [B]<!DOCTYPE html> [/B]


  • 3. [B]var date = document.getElementById("date").value;[/B] is trying to get an element that does not exist.


  • 4. Your [B]<input>[/B] tag has [B]name="value" [/B]as its name, you should not use [B]reserved words[/B] or [B]keywords[/B] as name, it saves confusion or problems when accessing a property of that element. Much better would be to have the [COLOR="#FF0000"]name="value"[/COLOR] changed to [COLOR="#008000"]name="thedate"[/COLOR] and then amend the script.


  • 5. Using [COLOR="#FF0000"]document.getElementById()[/COLOR] is not a good way of accessing form elements. Besides that, the HTML tag needs to have a [B][U]unique ID[/U][/B], example [B]<input name="thisname" id="thisname" ....[/B] which makes that <input respond to straight access via [B]document.forms.date.thedate.value [/B]addressing or via [B]document.getElementById("thisname").value[/B]


  • 6. this needs changing [COLOR="#FF0000"]<input type="button" value="test" onclick="validateDate()" />[/COLOR] to this [COLOR="#008000"]<input name="Submit" type="submit" value="Submit" />[/COLOR]


  • 7. change the [COLOR="#FF0000"]<form name="date">[/COLOR] tag to include the action as [B][COLOR="#008000"]action="javascript:;"[/COLOR][/B] and [B][COLOR="#008000"]onsubmit="return validateDate(this);" [/COLOR][/B] and [B][COLOR="#008000"]method="post"[/COLOR][/B]


  • 8. modify the function validateDate() that tests to accept a parameter, eg... validateDate([B]o[/B]) then in the function [CODE]
    function validateDate([B][COLOR="#008000"]o[/COLOR][/B]) {
    var datePattern = /^d{1,2}[/-]d{1,2}[/-]d{2,4}$/;
    var date = [B][COLOR="#008000"]o[/COLOR][/B].thedate.value;
    console.log(date);
    if (datePattern.test(date)){
    console.log("<b>VALID DATE</b>");
    return true;
    }else{
    console.log("<b>INVALID DATE</b>");
    return false;
    }
    }
    [/CODE]


  • 9. Would you be surprised if I told you that your teachers teachings are out dated, [B][COLOR="#008000"]HTML5[/COLOR][/B] is here, yes I am aware that [COLOR="#FF0000"]HTML4[/COLOR] is still knocking around BUT most browsers will recognize this date issue and it is now tackled with... [B]<input name="thedate" [COLOR="#008000"]type="date"[/COLOR] value="" />[/B] which means that the input has to be a valid date, if HTML5 is not supported, the input field defaults to a text input...


  • Someone else may have a few nuggets of information, this will be enough to be going on with and I would say that your teacher really needs to start teaching proper methods of controlling output, take on board HTML5 advancements and teach workarounds for the minority of browsers that don't yet support HTML5 because the PC owners haven't updated their browsers.
    Copy linkTweet thisAlerts:
    @jalarieDec 05.2014 — <input name="thedate" type="date" value="" />[/QUOTE]

    Will this be handled properly for MM/DD/YY, DD/MM/YY, and YY/MM/DD dates? If so, how do I know which it is? If not, does it default to the format in my local area, and then what about visitors from elsewhere?
    Copy linkTweet thisAlerts:
    @rootDec 10.2014 — Try it and find out...
    Copy linkTweet thisAlerts:
    @jalarieDec 10.2014 — Try it and find out...[/QUOTE]
    Interesting!
    Copy linkTweet thisAlerts:
    @rootDec 12.2014 — Yes, and you can take a date element from an HTML5 input and use it in a Date() object without having to format the string that it makes.
    ×

    Success!

    Help @Hrigell13 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.10,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...