Simple app code question for validating

[Tullamore]

Here is the app I'm working on:
http://www.grabilla.com/02409-38f8d0...e9d9783b1f.png

I just have to validate the email address entered. To keep this simple, assume that a valid email address is one that contains an @ sign and a dot(period) with the dot after the @ sign. If the address is invalid, the application should display message like this, depending on what the problem is:

A valid email address must include an @ sign.

A valid email address must include a period after the @ sign.

Here is my JavaScript:

var $ = function (id) {
    return document.getElementById(id); 
}

var email_click = function () {
    var emailAddress = $("email").value;
    alert ( emailAddress );
}

var date_click = function () {
    var dateEntry = $("date").value;
	alert ( dateEntry );
}

window.onload = function () {
    $("processEmail").onclick = email_click;
	$("processDate").onclick = date_click;
}

Very new to this so any help is much appreciated.

[nathanwall]

You can use indexOf to find the location of a character in a string. It will return -1 if that character does not exist in the string.

var email_click = function () {
    var emailAddress = $("email").value;
    // Find the location of the @ symbol
    var atPos = emailAddress.indexOf('@');
    // Find the location of the dot, if there is one after the @ symbol
    var dotPos = emailAddress.indexOf('.', atPos);
    if(atPos == -1 || dotPos == -1) {
        alert('Invalid email address');
    } else {
        alert('Valid email address');
    }
}

[Tullamore]

Ok. I plugged that code in, after the var emailAddress line. I then entered my personal valid email address and it brings up the alert for an invalid address still. ??

[NoEffinWay]

I would recomend using a regular expression.
This should work:

var email = get.documentById(id).value;
if(email.match(/@+[a-zA-Z_]+\.[a-zA-Z_]/)){
//Is valid, do something
}else{
//is NOT valid.  Let them know.
}

Also, PLEASE validate any emails server side as well.

[Tullamore]

Ok. Would I replace this code:

var email_click = function () {
    var emailAddress = $("email").value;
    alert ( emailAddress );
}

..with that expression and then just enter my alert statements? Sorry, very new to this. I should also mention that this is just for testing through Aptana. Not sure if that matters or not.

[NoEffinWay]

Not replace, just edit. From:

var email_click = function () {
    var emailAddress = $("email").value;
    alert ( emailAddress );
}

:
to:

var email_click = function () {
    var emailAddress = $("email").value;
if(emailAddress.match(/@+[0-9a-zA-Z_-]+\.[a-zA-Z_]/)){
alert('Email Address is valid!');
}else{
alert('Email Address is NOT valid!');
}
}

[Tullamore]

Ok. It now looks like this:

var email_click = function () {
    var emailAddress = $("email").value;
    if(emailAddress.match(/@+[a-zA-Z_]+\.[a-zA-Z_]/)){
       alert('Email Address is valid!');
    }
    else{
       alert('Email Address is NOT valid!');
    }
}

but it still just gives me the 'Email Address in NOT valid' alert when I enter a valid email. ?

[NoEffinWay]

Could you paste the full page?

[Tullamore]

Sure. Here is the entire code:

var $ = function (id) {
    return document.getElementById(id); 
}

var email_click = function () {
    var emailAddress = $("email").value;
    if(emailAddress.match(/@+[a-zA-Z_]+\.[a-zA-Z_]/)){
       alert('Email Address is valid!');
    }
    else{
       alert('Email Address is NOT valid!');
    }
}

var date_click = function () {
    var dateEntry = $("date").value;
	alert ( dateEntry );
}

window.onload = function () {
    $("processEmail").onclick = email_click;
	$("processDate").onclick = date_click;
}

[Padonak]

yes, full pages always look like that ))

[Tullamore]

Well..the entire page is just this simple application:
http://www.grabilla.com/02409-38f8d0...e9d9783b1f.png

so yes, that is the entire javascript code for the page.

[Tullamore]

oops...this application:
http://www.grabilla.com/02409-38f8d0...e9d9783b1f.png

[NoEffinWay]

can I have the HTML for that page as well...? I see the image but that doesnt help much.

[Tullamore]

Sure thing. Here ya' go:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Strings and Dates</title>
	<style type="text/css">@import url("strings_and_dates.css");</style>
	<script type="text/javascript" src="strings_and_dates.js"></script>
</head>

<body>
<div id="content">
    <h1>Strings and Dates</h1>
	<form id="TestApp">
		<label for="email">Email Address:</label>
		<input type="text" id="email" /><br />
		
		<label>&nbsp;</label>
		<input type="button" id="processEmail" value="Process" /><br />
		
		<p></p>
		
		<label for="date">Date:</label>
		<input type="text" id="date" /><br />
			
		<label>&nbsp;</label>
		<input type="button" id="processDate" value="Process" /><br />
	</form>
</div>
</body>
</html>

Thanks for the help by the way. Much appreciated.

[NoEffinWay]

...? Works fine for me. I did it in the same page, to make it easier but here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Strings and Dates</title>
	
	<script type="text/javascript">
	var $ = function (id) {
		return document.getElementById(id); 
	}

	var email_click = function () {
		var emailAddress = $("email").value;
		if(emailAddress.match(/@+[a-zA-Z_]+\.[a-zA-Z_]/)){
		   alert('Email Address is valid!');
		}
		else{
		   alert('Email Address is NOT valid!');
		}
	}

	var date_click = function () {
		var dateEntry = $("date").value;
		alert ( dateEntry );
	}

	window.onload = function () {
		$("processEmail").onclick = email_click;
		$("processDate").onclick = date_click;
	}
	</script>
</head>

<body>
<div id="content">
    <h1>Strings and Dates</h1>
	<form id="TestApp">
		<label for="email">Email Address:</label>
		<input type="text" id="email" /><br />
		
		<label>&nbsp;</label>
		<input type="button" id="processEmail" value="Process" /><br />
		
		<p></p>
		
		<label for="date">Date:</label>
		<input type="text" id="date" /><br />
			
		<label>&nbsp;</label>
		<input type="button" id="processDate" value="Process" /><br />
	</form>
</div>
</body>
</html>

See it here: http://script-x.net/