Forum Moderators: open
<head>
<script type="text/javascript">
//<![CDATA[
function validate(){
(){}
}
//]]>
</script>
</head><body>
<form action="example.php" name="comments"onsubmit="return validate();">
<fieldset>
<label class="text" for="email">E-mail:</label><input class="text" id="email" name="email" type="text" />
<br class="clear"/>
<input class="button" type="submit" value="Send" />
</fieldset>
</form></body>
</html>
John
function isEmail(str)
{ var i = -1; return ((str.length >= 5) && ((i = str.indexOf("@")) > -1) && (i < str.lastIndexOf("."))) }
I've seen smaller solutions using regular expresions but I've never looked closely to see what they actually do.
Kaled.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Form Validation</title>
<link rel="stylesheet" type="text/css" href="theme-classic.css">
<script type="text/javascript">
//<![CDATA[
function validate() {
if (document.comments.name.value.length=="") {
alert("Please enter a Customer Name.");
return false;
}
if (document.comments.email.value.length < 1) {
alert("Please enter an email Address.");
return false;
}
return true;
}
//]]>
</script>
</head><body>
<form name="comments" Action="resultspage.asp" onsubmit="return validate();">
<fieldset>
<label class="text" for="name">Name:</label><input class="text" id="name" name="name" type="text" />
<br class="clear"/>
<label class="text" for="email">E-mail:</label><input class="text" id="email" name="email" type="text" />
<br class="clear"/>
<input class="button" type="submit" value="Send" />
</fieldset>
</form></body>
</html>
John
1) Send a reference to the form in the event handler. Makes things easy.
onsubmit="return validate([blue]this[/blue]);"2) Avoid using form member names (attributes or methods) for element names.
I have changed name="name" to name="username", because
form.name(- you could get the element using getElementById instead)
3) Always trim input before testing. It could be just whitespace.
4) Here's a couple of alternatives for an email reg exp.
The first just tests for the basics, the second is more complete (not the author of #2)
String.prototype.trim = function(){ return this.replace(/^\s+¦\s+$/g,'')} var regEmail = /^[a-z0-9][a-z0-9_\.-]+@[a-z0-9_\.-]+\./i;
//var regEmail = /^[a-z0-9]([a-z0-9]¦([\w\-]+[a-z0-9]))*(\.([a-z0-9]¦[a-z0-9][\w\-]+[a-z0-9]))*@[a-z0-9][\w\-]*[a-z0-9]\.([a-z0-9][\w\-]*[a-z0-9]\.)*[a-z]{2,6}$/i;
function validate(form)
{
var errMessages=[];
if (! form.username.value.trim() )
errMessages.push("Please enter a Customer Name.");
if (! regEmail.test( form.email.value.trim() ) )
errMessages.push("Please enter an email Address.");
var valid =!errMessages.length;
if(!valid)
alert(errMessages.join("\n"));
return valid;
}
What is the this in validate(this);?
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Form Validation</title>
<link rel="stylesheet" type="text/css" href="theme-classic.css">
<script type="text/javascript">
//<![CDATA[
String.prototype.trim = function(){ return this.replace(/^\s+¦\s+$/g,'')}var regEmail = /^[a-z0-9][a-z0-9_\.-]+@[a-z0-9_\.-]+\./i;
//var regEmail = /^[a-z0-9]([a-z0-9]¦([\w\-]+[a-z0-9]))*(\.([a-z0-9]¦[a-z0-9][\w\-]+[a-z0-9]))*@[a-z0-9][\w\-]*[a-z0-9]\.([a-z0-9][\w\-]*[a-z0-9]\.)*[a-z]{2,6}$/i;function validate(form)
{
var errMessages=[];
if (! form.username.value.trim() )
errMessages.push("Please enter a Customer Name.");
if (! regEmail.test( form.email.value.trim() ) )
errMessages.push("Please enter an email Address.");
var valid =!errMessages.length;
if(!valid)
alert(errMessages.join("\n"));
return valid;
}
//]]>
</script>
</head><body>
<form name="comments" Action="resultspage.asp" onsubmit="return validate(this);">
<fieldset>
<label class="text" for="username">Name:</label><input class="text" id="username" name="username" type="text" />
<br class="clear"/>
<label class="text" for="email">E-mail:</label><input class="text" id="email" name="email" type="text" />
<br class="clear"/>
<input class="button" type="submit" value="Send" />
</fieldset>
</form></body>
</html>
John
I've made a contribution! :)
I've changed it so that it will only validate the email address field if it is not blank.
Change...
if (! regEmail.test( form.email.value.trim()))
errMessages.push("Please enter an email Address.");
To...
if (form.email.value!="") {
if (! regEmail.test( form.email.value.trim()))
errMessages.push("Please enter an email Address.");
}
The full script...
<script type="text/javascript">
//<![CDATA[
String.prototype.trim = function(){return this.replace(/^\s+¦\s+$/g,'')}
var regEmail = /^[a-z0-9][a-z0-9_\.-]+@[a-z0-9_\.-]+\./i;function validate(form)
{
var errMessages=[];if (! form.comments.value.trim())
errMessages.push("Please enter some comments.");
if (! form.realname.value.trim())
errMessages.push("Please enter your (or a) name.");
if (form.email.value!="") {
if (! regEmail.test( form.email.value.trim()))
errMessages.push("Please enter an email Address.");
}
var valid =!errMessages.length;if(!valid)
alert(errMessages.join("\n"));
return valid;
}
//]]>
</script>
John
[edited by: jatar_k at 4:48 pm (utc) on Mar. 10, 2006]
var regEmail = /^[a-z0-9][a-z0-9_\.-]+@[a-z0-9][a-z0-9_\.-]+\./i;
I've added the extra [a-z0-9] after the @ as I'm guesing domain names have to have a minimal of two characters before the dot and extension?
John
PS - Sorry admins but I forgot to add the slash in my last post to close the BB quote. I tried to edit the post to fix but the time expired on me.
