email validation function not working with element[x] in javascript form validation

Question

I added this validate email function here at the top, and i don't know how to make it ref. element[6] which is the email field in the form, and I'm not sure what the

return re.test(email);

statement is all about here is the full script code:

<script type="text/javascript">

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\
".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA
-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}   


function validation(form) {
  if(form.elements[3].value == '' ) {
      alert('Please enter your first name');
      form.first_name.focus();
      return false;
  }

  if(form.elements[4].value == '') {
      alert('Please enter your last name');
      form.last_name.focus();
      return false;
  }

  if(form.elements[6].value == '') {
      alert('Please enter your email address');
      form.email.focus();
      return false;

  if (validateEmail(email)) {
    $("#result").text(email + " is a valid email address :)");
    $("#result").css("color", "green");
  } else {
    $("#result").text(email + "is not a valid email address :(");
    $("#result").css("color", "red");
    return false;
  }

  if(form.elements[7].value == '') {
      alert('Please enter your telephone number');
      form.phone.focus();
      return false;
  }

  if(form.elements[17].value == '') {
      alert('Please let us know what you are most interested in');
      form.phone.focus();
      return false;
  }

  if(form.elements[18].value == '') {
      alert('Please enter the area you are most interested in');
      form.phone.focus();
      return false;
  }

  if(form.elements[20].value == '') {
      alert('Please enter the low end of your budget');
      form.phone.focus();
      return false;
  }

  if(form.elements[21].value == '') {
      alert('Please enter the high end of your budget');
      form.phone.focus();
      return false;
  }

  return true;
}
</script>

red-X · Answer 1 · 2012-04-04T12:59:26.730

1

The function:

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\
".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA
-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

has a regex object (re), the regex object uses the test function to test if the email passed into the function validates according to the regex. the test function returns true if it validates as an email and false if it doesnt.

you can use it like this:

if(!validateEmail(form.elements[6].value)) {
  alert('Please enter a valid email address');
  form.email.focus();
  return false;
}

The test function is native to regex objects, meaning your browser will know what to do with it (specs for the test function: developer.mozilla.org/en/JavaScript/Reference/Global_Objects/ )

edited Apr 04 '12 at 12:59

answered Apr 03 '12 at 14:59

red-X

5,108
1
25
38

i don't see a test function however... :/ – Darek Bridges Apr 03 '12 at 15:16
http://stackoverflow.com/questions/46155/validate-email-address-in-javascript/46181#46181 – Darek Bridges Apr 03 '12 at 15:16
@DarekBridges [Regex.test](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp) is a javascript function, you have it. – jbabey Apr 03 '12 at 17:05
@DarekBridges the test function is native to regex objects, meaning your browser will know what to do with it (specs for the test function: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp/test) – red-X Apr 04 '12 at 08:19

score 0 · Answer 2 · answered Apr 03 '12 at 14:58

Inside you validation() function variable email that is being passed to validateEmail is pretty much undefined.

You should either:

validateEmail(form.email.value);

OR

validateEmail($('#email').val()); // considering that `email` field has id="email"

Hope this helps...

score 0 · Answer 3 · answered Apr 03 '12 at 14:59

0

form.elements was the way you selected DOM elements in 1996. You should be using document.getElementById instead:

var resultElement = $("#result");
var emailVal = document.getElementById('emailBoxId').value;
if (validateEmail(emailVal )) {
    resultElement
      .text(emailVal + " is a valid email address :)")
      .css("color", "green");
} else {
    resultElement
      .text(emailVal + "is not a valid email address :(")
      .css("color", "red");
    return false;
}

answered Apr 03 '12 at 14:59

jbabey

45,965
12
71
94

muwhahah... i was forced to use `form.elements` because i am not in control of my id's they are auto generated by a database :) and the database prefaces almost all of the id's with `00` – Darek Bridges Apr 03 '12 at 15:05

score 0 · Answer 4 · answered Apr 03 '12 at 15:01

Create a variable email and set its value to form.elements[6].value

e.g.

function validation(form) {
  if(form.elements[3].value == '' ) {
    alert('Please enter your first name');
    form.first_name.focus();
    return false;
  }
  //...
  var email = form.elements[6].value
  if (validateEmail(email)) {
    $("#result").text(email + " is a valid email address :)");
    $("#result").css("color", "green");
  } else {
    $("#result").text(email + "is not a valid email address :(");
    $("#result").css("color", "red");
    return false;
  }
 //...
}

email validation function not working with element[x] in javascript form validation

4 Answers4