...

View Full Version : Please help with email and date of birth 18+ validation



hammerbl
11-03-2012, 07:21 PM
I am a student in an intro JS class and am having trouble and really new to this. How would you make it so the date is for 18+ and verify email address? Thanks for any help!

<body>
<div id="age">
<form name="myform" action="success.html" method="get" onSubmit="">
<h3>Verify!</h3>

<ul>
<li>
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="">
</li>
<ul>
<li>
<label for="email">Email Address:</label>
<input type="text" name="email" id="email" value="">
</li>

<ul>
<li>
<label for="dob">Date of Birth</label>
<input type="text" name="dob" id="dob" value="">
</li>
<input type="button" id="submit" value="Submit">

</form>
</div>
<div id="game">Blackjack</div>

<script>
var checkIfDate = function(srcElement) {
var testDob = /^\d{2}\/\d{2}\/\d{4}$/;
if(testDob.test(srcElement.value) == false){
console.log(srcElement.id + " must be a VALID DATE in xx/xx/xxxx format!!!11!11!");
// srcElement.select();
return false;
} else {
return true;
}
}
//Check for empties
var submitForm = function(event) {
var err = false;
if (document.getElementById("name").value.length<=0) {
console.log("First Name needs a value");
err = true;
}
//Check if email
if (document.getElementById("email").value.length<=0) {
console.log("Email needs a value");
err = true;
}
//checks for valid dob
if (document.getElementById("dob").value.length<=0) {

err = true;
}
if (!checkIfDate(document.getElementById("dob"))) {
err = true;
}
//first create a variable to hold the value of the email field

if (err==false) {
console.log("submitting...");
} else {
console.log("There were errors...");
}
}
// This will assign event listeners to the form elements.
var init = function () {
document.getElementById("submit").addEventListener('click', submitForm, true);
}
// This has to be AFTER you define init()
// Call the init() function when the page loads.
window.addEventListener('load', init, false);

Philip M
11-03-2012, 07:58 PM
Both of these questions have been asked many times before. Have you tried using the forum search feature?

Age 18 minimum:-


<html>
<head>
</head>

<BODY BGCOLOR="#FFF000" TEXT="#000000" LINK="#0000FF" VLINK="#0000FF">

Enter Date Of Birth in YYYY-MM-DD format <input type = "text" name = "dob" id = "dob" size = "10" maxlength = "10" onblur = "checkAge()">

<script type = "text/javascript">

function checkAge() {

var today = new Date();
var d = document.getElementById("dob").value;
d=d.replace(/\//g,"-"); // if user has entered / instead of -

if (!/\d{4}\-\d{2}\-\d{2}/.test(d)) { // check valid format
showMessage();
return false;
}

d = d.split("-");
var byr = parseInt(d[0]);
var nowyear = today.getFullYear();
if (byr >= nowyear || byr < 1900) { // check valid year
showMessage();
return false;
}

var bmth = parseInt(d[1],10)-1; // radix 10!
if (bmth <0 || bmth >11) { // check valid month 0-11
showMessage();
return false;
}
var bdy = parseInt(d[2],10); // radix 10!
var dim = daysInMonth(bmth+1,byr);
if (bdy <1 || bdy > dim) { // check valid date according to month
showMessage();
return false;
}

var age = nowyear - byr;
var nowmonth = today.getMonth();
var nowday = today.getDate();
var age_month = nowmonth - bmth;
var age_day = nowday - bdy;
if (age < 18 ) {
alert ("We're sorry but this won't allow children under 18 years old to register.");
}
else if (age == 18 && age_month <= 0 && age_day <0) {
alert ("We're sorry but this site won't allow children under 18 years old to register.");
}
else {
alert ("You are old enough to register!")
}

}

function showMessage()
{
if (document.getElementById("dob").value != "") {
alert ("Invalid date format or impossible year/month/day of birth - please re-enter as YYYY-MM-DD");
document.getElementById("dob").value = "";
setTimeout('document.getElementById("dob").focus()',10);
}
}

function daysInMonth(month,year) { // months are 1-12
var dd = new Date(year, month, 0);
return dd.getDate();
}

</script>
</body>
</html>

You can of course easily alter the date format to DD-MM-YYY or whatever. You do not mention your location in your profile.

Email validation:-


if (!(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@((\w)([\w\-]?)+\.)+([a-z]{2,4})$/i.test(email.value))) { // retuns true if invalid

if (document.getElementById("name").value.length<=0) {

You should avoid giving names or id's to your variables/functions/arguments/forms words which are HTML/JavaScript methods/properties/attributes such as 'name' or 'id' or 'value' or 'test' or 'text' or 'checked' or 'click' or 'href' or 'closed' or 'go' or 'submit' or 'replace' or 'button' or 'radio' or 'parseInt'.

How can the length of a string be < 0?

Form validation of the pattern if (document.getElementById("elementid").value.length ==0) - that is blank - is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. A proper name may only contain letters, hyphen, space and apostrophe.
Numeric values, such as zip codes and phone numbers, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.


"There is no reason anyone would want a computer in their home." - Ken Olson, President/Founder of Digital Equipment Corp., 1977.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum