1

Can someone please tell me how to add my below JavaScript (function validateEmail() to the JavaScript I already created (function validateForm()? I need to combine the 2 into one. What I did was create a JavaScript to create error messages, then my new one creates an error message if the Email field was typed incorrectly. The longer JavaScript is what needs the shorter one. Do I just add an else if, if than? I am new to JavaScript. Thank you for those that help.

function validateForm() {
    var ret = true;
    var name = document.forms["contactform"]["name"].value;
    var nameError = document.getElementById('name.error');
    if (name == "") {
        nameError.innerHTML = "Please enter your name";
        ret = false;
    } 
    else {
        nameError.innerHTML = "";
    }
    var email = document.forms["contactform"]["email"].value;
    var emailError = document.getElementById('email.error');
    if (email == "") {
        emailError.innerHTML = "Please enter your Email";
        ret = false;
    } 
    else {
        emailError.innerHTML = "";
    }
    var phone = document.forms["contactform"]["telephone"].value;
    var phoneError = document.getElementById('telephone.error');
    if (phone == "") {
        phoneError.innerHTML = "Please enter your telephone";
        ret = false;
    }
    else {
        phoneError.innerHTML = "";
    }
    return ret;
}

NEW JAVASCRIPT

function validateEmail() {
    var email = document.forms["contactform"]["email"].value;
    var emailError = document.getElementById('email.error');
    var valid = /[^@]+@[^@]+/.test(email);
    if (!valid) {
        emailError.innerHTML = "Please enter a valid email address";
    }
    return valid;
}
Manngo
  • 14,066
  • 10
  • 88
  • 110
t_strudel
  • 41
  • 6

2 Answers2

0

Your final function should look like below:

function validateForm() {
  var ret = true;
  var name = document.forms["contactform"]["name"].value;
  var nameError = document.getElementById('name.error');
  if (name == "") {
    nameError.innerHTML = "Please enter your name";
    ret = false;
  } 
  else {
    nameError.innerHTML = "";
  }

  ret &= validateEmail();

  var phone = document.forms["contactform"]["telephone"].value;
  var phoneError = document.getElementById('telephone.error');
  if (phone == "") {
    phoneError.innerHTML = "Please enter your telephone";
    ret = false;
  }
  else {
    phoneError.innerHTML = "";
  }
  return ret;
}

// in diff file
function validateEmail() {
  var email = document.forms["contactform"]["email"].value;
  var emailError = document.getElementById('email.error');
  var valid = /[^@]+@[^@]+/.test(email);
  if (!valid) {
    emailError.innerHTML = "Please enter a valid email address";
  }
   else {
    emailError.innerHTML = "";
   }
  return valid;
}

EDIT

If you can not (or dont want to) change validateForm function to include call to validateEmail then you can specify both functions in the form onsubmit 

onsubmit="return validateForm() && validateEmail()"
MaxZoom
  • 7,619
  • 5
  • 28
  • 44
  • Do I type the rest of the code below ret &= validateEmail();? – t_strudel Apr 26 '17 at 03:21
  • I see now. Am about to test in one min. But first, can you tell me what ret &= validateEmail(); means??? Thank you. – t_strudel Apr 26 '17 at 03:29
  • It assign the value returned from the `validateEmail` function to the `ret` variabe in the [bitwise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators) fashion. – MaxZoom Apr 26 '17 at 03:32
  • I'm sorry, but what about my code for the error message for the Email? – t_strudel Apr 26 '17 at 03:34
  • It is (should be) combined in the `validateEmail` function. If you can not combine them then just call the `validateEmail` from the `validateForm` – MaxZoom Apr 26 '17 at 03:37
  • I can have this:
    – t_strudel Apr 26 '17 at 03:38
  • I'm sorry, but it does not work.
    – t_strudel Apr 26 '17 at 03:44
  • Please notice that you have two `return` statements. It should be only one. See **EDIT** in my asnwer – MaxZoom Apr 26 '17 at 03:45
  • Amazing. It works. Thank you so much. This has taken me many hours today. Can you guide me in the right direction on how to validate a phone number? Jon Duckett's book does not describe that. – t_strudel Apr 26 '17 at 03:52
  • Glad I could helpand welcome to Stack Overflow. What is the phone number validation criteria? – MaxZoom Apr 26 '17 at 03:52
  • Thank you. I am only 1 week into JavaScript. Just a normal phone number- 1112223333. What are the criteria I can choose from? – t_strudel Apr 26 '17 at 03:58
  • It could be international phone, or North America phone (10 digit). The validation would be similiar to email but with different [regex](http://stackoverflow.com/q/9776231/4454454) – MaxZoom Apr 26 '17 at 04:03
  • I will look into this 'regex' I see all over the place. In my onsubmit area where you helped me, do I just add another '&'? onsubmit="return validateForm() && validateEmail() &&& validatePhone() &&&& validateName()" – t_strudel Apr 26 '17 at 04:06
  • You can do that (with two `&&`) but it really should be a part of the form validation code. So I would advise to add it there and have only one function for `onsubmit` – MaxZoom Apr 26 '17 at 04:08
  • If you have time, don't have to tonight, can you show me how to add it into one code? – t_strudel Apr 26 '17 at 04:11
0

Your form validation script simply needs to call your additional function as an additional test.

Try adding this to the end of your main function:

if(!validateEmail()) {
    //  error code
    ret=false;
}
else {
    //  ok
}

return ret;
Manngo
  • 14,066
  • 10
  • 88
  • 110