I am having a little trouble with my javascript when I am trying to validate email. The validation itself works fine but its the message that I am having issue with.
Basically if the user enters incorrect email format in email field and not matching email in confirm email, it displays validation for both fields which is great.
If I then enter in a valid email but still mismatch, the email validation is removed and the confirm password validation remains which is also great.
But lets say I fix the confirm password and I submit, but I did not complete all components in my form, I would have at least expected the confirm email validation message to disappear as it's correct, but it remains. When I complete all my form and submit, the form goes through, but it's just this message should have disappeared if user attempted to submit and had other areas of the form to complete but don't have to worry about confirm email.
What is causing this message to stay whilst all other fields needs to be valid?
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 validate() {
var $result = $("#resultEmail");
var $confirmResult = $("#resultConfirmEmail");
var email = $("#email").val();
var confirmEmail = $("#confirmEmail").val();
$result.text("");
if (validateEmail(email)) {
if (email == confirmEmail) {
return true;
} else {
$confirmResult.text("Your email and confirm email do not match");
$confirmResult.css("color", "red");
}
} else {
$result.text(email + " is not a valid email address");
$result.css("color", "red");
}
return false;
}
$(".buynow").on("click", validate);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form id="tcform"><p><b>Attach your CV:</b> (.doc, .docx, .pdf, .txt, .rtf)</p><input type="file" id="uploadCV" /><br/><br/><div class="formcontainer"><label for="email"><b>Email:</b></label><input type="input" id="email" name="email" required /><p id="resultEmail"></p><br/><br/><label for="email"><b>Confirm Email:</b></label><input type="input" id="confirmEmail" name="confirmEmail" required /><p id="resultConfirmEmail"></p><br/><br/><label for="job"><b>Desired Job Position:</b></label><input type="input" id="job" name="job" required/></div><button type="submit" class="btn btn-default buynow"
id="checkout-button-sku_GseRUDMUnFmQzs" role="link">
Buy Now</button></form>