How can we integrate a "valid email" system in this code?

Question

So now I have my successful code. But what I want to do is include this in my AJAX. So this is my AJAX:

function checkEmail() {
  // var myForm = $("#mainForm").serialize();
  var fname = $("#first").val();
  var lname = $("#second").val();
  var email = $("#email").val();
  var password = $("#password").val();
  var repass = $("#en").val();
  if (fname && lname && email && password && repass && password.length >= 6 && password == repass)) {
    jQuery.ajax({
      url: "connection.php",
      data: {
          fname:fname,
          lname:lname,
          email:email,
          password:password,
          repass:repass
      },
      type: "POST",
      success:function(data){
  $("#emailExists").show();
  $("#email").css("border","2px solid green");
  $("#no").css("visibility","hidden");
  $("#yes").css("visibility","visible");
  if(data){
    $("#email").css("border", "2px solid red");
    $("#no").css("visibility","visible");
    $("#yes").css("visibility","hidden");
    }else
    {
    $("#email").css("border", "2px solid green");
    $("#no").css("visibility","hidden");
    $("#yes").css("visibility","visible");
    window.location.href = 'home.php';
    }
  $("#emailExists").html(data);
  },
  error:function (){
  }
  });
   }
}

So, what I want to do, is basically, in that if statement [if(name && lname...)]. In that particular section, I want to include this particular checking if email valid system too. So I was thinking maybe make this code (the if statement to check if email is valid), into a function, to then add it into the AJAX, so something like this:

  if (fname && lname && email && password && repass && password.length >= 6 && password == repass && checkValidateEmail()) {

But if I keep that if statement in a function called checkValiateEmail() and do that, it isn't working. What should I do?

Validate Email using Regex visit this Question [link](https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript) — Bhautik Domadiya, Oct 18 '21 at 05:40
What have you tried so far? Please show some code. Your codes email validation is `email !== ""`. "[O]ne or another issue arised". Which issues did arise? Please specify your question and please provide a [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example). Your current code does not work, there is no html but you are reffering buttons ect. — miile7, Oct 18 '21 at 05:47
@AhsanKhan Yes, but I want to display error message, if it isn't valid. — aarushDagoat, Oct 18 '21 at 05:57
@miile7 My If statement: if (validateEmail(email)) { no.style.visibility = 'hidden'; yes.style.visibility = 'visible'; email.style.border = '2px solid green'; mailText.style.visibility = 'hidden'; validEmail.style.visibility = 'hidden'; } else { no.style.visibility = 'visible'; yes.style.visibility = 'hidden'; email.style.border = '2px solid red'; mailText.style.visibility = 'hidden'; validEmail.style.visibility = 'visible'; } — aarushDagoat, Oct 18 '21 at 06:06
@aarushDagoat And what does the `validateEmail()` function contain? What did you try so far? Please show some code of the email validation. You are showing code that does some styles. That's not important for the question. Also use the edit function to edit your question. And again, **please read about [Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) and [How to ask](https://stackoverflow.com/help/how-to-ask)**. If you do not provide a good question, you will not get any help! — miile7, Oct 18 '21 at 06:20
@miile7 validateEmail() function: function validateEmail(email) { const 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); } — aarushDagoat, Oct 18 '21 at 06:26
@BhautikDomadiya Here's the validateEmail() function: function validateEmail(email) { const 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); } Here's the tag error message: Please enter a valid email address. — aarushDagoat, Oct 18 '21 at 06:27
@aarushDagoat Ah, good. Now click *edit* at the very end of your question and add the code you've just posted to your question. — miile7, Oct 18 '21 at 06:28
@aarushDagoat The next step is: Why does your `validateEmail()` function not work? Why can you not use it? — miile7, Oct 18 '21 at 06:29
I can't paste the entire code, because there is a character limit on the comments. But to put it straight, if there's no email it's saying "Please enter an email address.". That's good. If it's not valid, it's saying "Please enter a valid email address.". That's good as well. But if everything is correct and nothing is invalid, the border is not turning green, and the error message is not turning into "visibility:hidden", and it's remaining red, although I specified for that to happen in the else component of the if statement in the code. Like even if the email is valid, it's not turning green — aarushDagoat, Oct 18 '21 at 06:31
No, stop! "I can't paste the entire code, because there is a character limit on the comments" - YES, that's why you should **EDIT YOUR QUESTION**. Add all those information you just posted in the comments to your question. Your question has to contain the information about your question! Not the comments! You will not get answers if your question looks like what it does now! — miile7, Oct 18 '21 at 06:34
No. That may seem childish but it isn't. You formatting your question and creating a minimal working example will show you where your error is. 90% of the questions I write myself I am solving while formulating the question. Asking takes time. And I want you to do that. I want you to think about what exactly is your problem. And that will help you. And additional it's not the task of your audience to read hundreds of comments to get what you want. Your question has to be written to directly tell readers what you are looking for. This way you will get good feedback. — miile7, Oct 18 '21 at 06:42
Sorry for nerving again: I've added a working example (with the error fix) to my answer. You can do this by using the "code snippet" button in the top of the editor when you write a question. This is a very nice feature since it forces you to write a minimal working example and answerers can click "use code snippet in answer" which makes them a lot more willing to answer. If you write a javascript/html/css question again, I very strongly suggest to use it. — miile7, Oct 18 '21 at 06:55

score 0 · Accepted Answer · answered Oct 18 '21 at 06:52

Your error is in line 20 (of my snippet, see below). You are passing your email HTMLElement to the validateEmail() function, not the inputs value. The correct code is the following, you had validateEmail(email).

if(email.value === ""){
    // ...
}
else if (!validateEmail(email.value)){ // <- the error was here
    // ...
}
else{
    // ...
}

The full working code is then:

function validateEmail(email) {
  const 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);
}

const email = document.getElementById("email");
const no = document.getElementById("no");
const yes = document.getElementById("yes");
const mailText = document.getElementById("email-text");
const validEmail = document.getElementById("valid");

email.addEventListener("change", function(){
  if(email.value === "") {
    no.style.visibility = 'visible';
    yes.style.visibility = 'hidden';
    email.style.border = '2px solid red';
    mailText.style.visibility = 'visible';
    mailText.innerText = "Please enter an email address.";
    validEmail.style.visibility = 'hidden';
  } else if (!validateEmail(email.value)) {
    no.style.visibility = 'visible';
    yes.style.visibility = 'hidden';
    email.style.border = '2px solid red';
    mailText.style.visibility = 'hidden';
    validEmail.style.visibility = 'visible';
  } else {
    yes.style.visibility = 'visible';
    no.style.visibility = 'hidden';
    email.style.border = '2px solid green';
    mailText.style.visibility = 'hidden';
  }
});

<input type="text" id="email" />
<span id="yes">Yes</span>
<span id="no">No</span>
<span id="valid">Valid</span>
<p id="email-text"></p>

No, don't do that. Your question is answered, now create a new question. Stackoverflow does not support changing your questions subject. This question **WILL NEVER BE SHOWN TO ANY USER**. You **HAVE** to create a new one. I'm sorry for that. — miile7, Oct 18 '21 at 07:11

How can we integrate a "valid email" system in this code?

1 Answers1