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?
My Javascript for checking if email is valid:
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';
validEmail.style.visibility = 'hidden';
}
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);
}
CodePudding user response：
validateEmail(email) has exactly one parameter (the email that should be validated) but you are not passing any parameter in your if.
if (fname && lname && email && password && repass && password.length >= 6 && password == repass && checkValidateEmail()) {
// ↑
// HERE the `email` is missing ───────────────────────────────┘
Your check has to be
if ( /* ... */ validateEmail(email) ){
// ...
}
otherwise there is nothing that can be checked. (Well, undefined is checked wheter it's a valid email, but of course it's not).
CodePudding user response：
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);
}
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';
validEmail.style.visibility = 'hidden';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input style="margin-left:-10px; width:505px; font-family:inherit; margin-top:11px" class="mail" type="text" id="email" name = "email" placeholder="Email Address">
<i style="color: green; margin-top:28px; margin-left:-38px; position:absolute; visibility: hidden" class="fa fa-check-circle" id="yes"></i>
<i style="color: red; margin-top:28px; margin-left:-38px; position:absolute; visibility: hidden" class="fa fa-exclamation-circle" id="no"></i>
<small style="margin-top:56px; position: fixed; margin-left: -498px; font-size: 14px; color:red; visibility: hidden" id="mailText"></small>
<span style="margin-top:56px; position: fixed; margin-left: -498px; font-size: 14px; color: red; display:none" id="emailExists" name="emailExists" class="emailExists">Email address already taken.</span>
<small style="margin-top:56px; position: fixed; margin-left: -498px; font-size: 14px; color:red; visibility:hidden" id="validEmail">Please enter a valid email address.</small> <input style="margin-left:-10px; width:505px; font-family:inherit; margin-top:11px" class="mail" type="text" id="email" name = "email" placeholder="Email Address">
<i style="color: green; margin-top:28px; margin-left:-38px; position:absolute; visibility: hidden" class="fa fa-check-circle" id="yes"></i>
<i style="color: red; margin-top:28px; margin-left:-38px; position:absolute; visibility: hidden" class="fa fa-exclamation-circle" id="no"></i>
<small style="margin-top:56px; position: fixed; margin-left: -498px; font-size: 14px; color:red; visibility: hidden" id="mailText"></small>
<span style="margin-top:56px; position: fixed; margin-left: -498px; font-size: 14px; color: red; display:none" id="emailExists" name="emailExists" class="emailExists">Email address already taken.</span>
<small style="margin-top:56px; position: fixed; margin-left: -498px; font-size: 14px; color:red; visibility:hidden" id="validEmail">Please enter a valid email address.</small>
<script type="text/javascript">
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);
}
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';
validEmail.style.visibility = 'hidden';
}
<script>