form validation self study

Question

please help. I'm not asking you to create the program just please tell me what I'm missing. This is for self studying. I am trying to make a javascript program that would do this: 1. alert user if no name or email had been created 2. email data must contain an @ sign and at least one dot (.). Also, the @ must not be the first character of the email address, and the last dot must be present after the @ sign, and minimum 2 characters before the end. My code:

 <html>
 <head>
 <script type="text/javascript">

 function validateForm1()
 {
 var y=document.forms["myForm"]["email"].value;
 var atpos=y.indexOf("@");
 var dotpos=y.lastIndexOf(".");
 var x=document.forms["myForm"]["fname"].value;
 if (x==null || x=="" ||  y=="")
 {
 alert("First name and Email must be filled out");
 return false;
 }
 else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)

 {
 alert("Not a valid e-mail address");
 return false;
}
}

 </script>
 </head>

 <body>

<form name="myForm" action=# onsubmit="return validateForm1()" method="post">
 First name: <input type="text" name="fname"><br/>
Email: <input type="text" name="email"><br/>
<input type="submit" value="Submit">
</form>



</body>

</html>

Farhan Ahmad · Answer 1 · 2011-10-06T02:28:25.993

0

To check to see if the fields are not empty, you can simply use this:

if (strValue) {
    // string not empty
} else {
    // string empty
}

If you need to check specifically for an empty string over null, I would think checking against "" is your best bet, using the === operator (so that you know that it is, in fact, a string you're comparing against).

For validating the email address, I would suggest using a regular expression.

Here is an example:

function validateEmail(elementValue){
   var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
   return emailPattern.test(elementValue);
}

edited Oct 06 '11 at 02:28

answered Oct 06 '11 at 02:23

Farhan Ahmad

5,148
6
40
69

Here's a [better example of an email regex](http://stackoverflow.com/questions/1903356/email-validation-regular-expression)...it'll blow your mind! – Clive Oct 06 '11 at 02:43

score 0 · Answer 2 · answered Oct 06 '11 at 02:27

Rather than coming up with your own rules for email, consider that emails all adhere to a regular format, making them a good candidate for regular expressions.

This is the first email regex I found with google (meaning there may very well be better ones).

var email_rx = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

This greatly simplifies your code. No more looking for dots and ampersands, you simply check that the email matches the supplied regex pattern:

function validateForm1() {
  var email = document.forms["myForm"]["email"].value;
  var fname = document.forms["myForm"]["fname"].value;

  // also note that in javascript, empty strings and nulls are both "falsey",
  // so this conditional works.
  if (!fname || !email) {
    alert("First name and Email must be filled out");
    return false;

  // if they both exist, test your email versus the regex.
  } else if (!email_rx.test(email)) {
    alert("Not a valid e-mail address");
    return false;
  }
}

score 0 · Accepted Answer · answered Oct 06 '11 at 02:28

0

in your else if condition, it should be dotpos + 2 >= y.length instead of dotpos + 2 >=x.length

answered Oct 06 '11 at 02:28

rb512

6,880
3
36
55

also as numbers1311407 and Farhan suggested, better use regular expression for email address validation – rb512 Oct 06 '11 at 02:29

score 0 · Answer 4 · answered Oct 06 '11 at 02:46

In your code:

> function validateForm1()    > {    >   var y=document.forms["myForm"]["email"].value;

You should be careful of long property access chains, if a part is missing you'll simply get an error and the script will cease functioning. Also, use sensible names for variables, it makes life much easier. Consider something like:

  var form = document.forms['myForm'];
  var emailInput = form && form.elements['email'];
  var email = emailInput && emailInput.value;

Now if the form or email input are missing for whatever reason, you have a much better chance of dealing with the error and not just crashing the script.

>   var atpos=y.indexOf("@");    >   var dotpos=y.lastIndexOf(".");

Your requirement for the email address (which is quite minimal and likely of not much use, but that's your choice) can be met by a regular expression:

  var emailRe = /.+@.*\...+$/;

>   var x=document.forms["myForm"]["fname"].value;
>   if (x==null || x=="" ||  y=="")

If you initialise x (which I'll call name) similarly to y (which I renamed email), then x will either be undefined or a string. Presumably you want the name to not be empty and not have only white space, so:

  var nameRe = /^\s*$/;  // match string of just zero or more whitespace characters
  if (name && nameRe.test) {

.

>   {
>     alert("First name and Email must be filled out");
>     return false;
>   }
>   else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)

And that can be:

  else if (!emailRe.test(email)) {

.

>   {
>     alert("Not a valid e-mail address");
>     return false;
>    }
>  }

form validation self study

4 Answers4