Using the outcome of a function in another function

Question

I have created 3 functions to cilentside validate a form for its name, email, and website, I would like to create a 4th function that checks if the outcome of the 3 first functions is true, we submit the form, if the outcome of any of them is false, the form doesn't get submitted. Below is my attempt for the JavaScript. The purpose of this question is to learn how to use a 4th function to check the other 3 functions returns.

//validating name, email, website:

function nameValidation() {
  var valid = true;
  var name = document.getElementById("name1").value;
  var validname = /^[a-zA-Z\s]*$/;

  if (name == "") {
    document.getElementById("errorMsg2").innerHTML = "* Name is required";
    valid = false;
  } else if (name.match(validname)) {
    valid = true;
  } else {
    document.getElementById("errorMsg2").innerHTML = "* Only letters and white spaces allowed";
    valid = false;
  }

  return valid;
}

function emailValidation() {
  var valid = true;
  var validEmail = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
  var email = document.getElementById("email1").value;

  if (email == "") {
    document.getElementById("errorMsg3").innerHTML = "* Email is required";
    valid = false;
  } else if (email.match(validEmail)) {
    valid = true;
  } else {
    document.getElementById("errorMsg3").innerHTML = "*Please enter a valid email.";
    valid = false;
  }

  return valid;

}

function websiteValidation() {
  var valid = true;
  var validWebsite = /\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i;
  var website = document.getElementById("website1").value;

  if (website == "" || website.match(validWebsite)) {
    valid = true;
  } else {
    document.getElementById("errorMsg4").innerHTML = "* Website is required";
    valid = false;
  }

  return valid;
}



// function for form submission:
function formSubmit() {
  if (nameValidation() == true && emailValidation() == true && websiteValidation() == true) {
    return true;
  } else {
    return false;
  }
}

document.getElementById("submit").addEventListener("click", () => {
  console.log("Final result:", formSubmit());
});

<div>
  <div id="errorMsg2"></div>
  <input type="text" id="name1" />
</div>
<div>
  <div id="errorMsg3"></div>
  <input type="text" id="email1" />
</div>
<div>
  <div id="errorMsg4"></div>
  <input type="text" id="website1" />
</div>
<div>
  <input type="submit" id="submit" />
</div>

the question is the form gets submitted despite the invalid values, i don't want it to be submit it unless all 3 functions return true — Arcane Persona, Feb 16 '22 at 18:08
Which values are valid? Which values are invalid? What are you entering in order to get a problem? Which particular validation is malfunctioning? Or is it all of them? — VLAZ, Feb 16 '22 at 18:12
@VLAZ i entered an invalid email value, yet the form got submitted, what im trying to learn here is how to use a 4th function to check other functions, thats the main point here, the submit prevention is secondary. — Arcane Persona, Feb 16 '22 at 18:19
It does not sound like "using a function" at all. Sounds like the email validation you have does not work how you want. You're doing what you need - calling the function. The problem isn't there. And the other three functions are also irrelevant in this case - neither the name validation, nor the website validation are of any importance to the email validation. And the `formSubmit` does nothing but call the email validation. Focusing on the problem at hand *and explaining it* is important. See [mcve]. — VLAZ, Feb 16 '22 at 18:25
You would need to return true or false in the click handler. Right now you just do console.log. `return formSubmit()` — James, Feb 16 '22 at 19:23

score 2 · Answer 1 · answered Feb 16 '22 at 18:13

2

Delete all of the JavaScript. This is the only HTML you need:

<input type="text" id="name1" pattern="[a-zA-Z\s]+" title="Letters and spaces only" required />
<input type="email" id="email1" required />
<input type="url" id="website1" required />
<input type="submit" id="submit" />

HTML5 Form validation has been around for a very long time at this point.

answered Feb 16 '22 at 18:13

Niet the Dark Absol

320,036
81
464
592

Thank you Niet, and yes you are correct, however, im trying to practice javascripts, so i didnt want to use HTML5 features, what i want to learn here is how to use a function that checks if other fucntions are true or false, and to take an action based on that. – Arcane Persona Feb 16 '22 at 18:21

Using the outcome of a function in another function

1 Answers1