I've been trying to validate USA and Canadian postal codes as I'm sending them through an api. However, I can't seem to get the regex to work. My validation is a bit messy but it should work nonetheless, I believe the regex is correct I just have the wrong logic? I would appreciate any help. Thanks.
function checkoutv2() {
var typepostal;
if (xcountry == 1) {
//canada
typepostal = "Canada";
} else if (xcountry == 2) {
//usa
var typepostal = "USA";
}
console.log(xcountry);
var xfirstname = document.getElementById("firstname").value;
var xlastname = document.getElementById("lastname").value;
var xemail = document.getElementById("email").value;
var xcity = document.getElementById("city").value;
var xaddress = document.getElementById("address").value;
var xpostal = document.getElementById("postal").value;
xpostal = xpostal.toString().trim();
var reg = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
var ca = new RegExp(/([ABCEGHJKLMNPRSTVXY]\d)([ABCEGHJKLMNPRSTVWXYZ]\d){2}/i);
var us = new RegExp("^\\d{5}(-{0,1}\\d{4})?$");
if (xfirstname == "" || xfirstname.length > 50) {
document.getElementById("firstname").style.border = "1px solid red";
} else if (xlastname == "" || xlastname.length > 50) {
document.getElementById("lastname").style.border = "1px solid red";
} else if (reg.test(xemail) == false || xemail.lenth > 100) {
document.getElementById("email").style.border = "1px solid red";
} else if (xcity == "" || xcity.length > 100) {
document.getElementById("city").style.border = "1px solid red";
} else if (xaddress == "" || xaddress.length > 100) {
document.getElementById("address").style.border = "1px solid red";
} else if (
typepostal == "Canada" &&
ca.test(xpostal.toString().replace(/\W+/g, "")) == false &&
xpostal.length >= 10
) {
console.log("postal is cad");
console.log(xpostal);
document.getElementById("postal").style.border = "1px solid red";
} else if (
typepostal == "USA" &&
xpostal.length > 10 &&
us.test(xpostal.toString()) == false
) {
console.log("postal is us");
document.getElementById("postal").style.border = "1px solid red";
} else {
checkout();
}
}
Related
I have a validation function were is some code is repeating, how I can make it more shorter.
function validated() {
if (user.value.length < 9) {
user.style.border = '1px solid red';
userError.style.display = 'block';
user.focus();
return false;
}
if (password.value.length < 9) {
password.style.border = '1px solid red';
passError.style.display = 'block';
password.focus();
return false;
}
}
function validateField(elt, errorElt, minLength) {
if (elt.value.length < minLength) {
elt.style.border = '1px solid red';
errorElt.style.display = 'block';
elt.focus();
return false;
}
return true;
}
function validated() {
return validateField(user, userError, 9) && validateField(password, passwordError, 9);
}
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?
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>
I have some blank spaces in a paragraph that requires the correct word to be entered when written into it. I have a function checking if the words are correct and another that will change the font of the incorrect word entered to be red.
Does anyone know where I went wrong in this code? The isCorrect() function works when I am not calling the font() function, but I don't know what would be wrong with the font() function.
Thanks
function isCorrect(){
var word1 = document.getElementById("word1").innerHTML;
var word2 = document.getElementById("word2").innerHTML;
var word3 = document.getElementById("word3").innerHTML;
var word4 = document.getElementById("word4").innerHTML;
var word5 = document.getElementById("word5").innerHTML;
var word6 = document.getElementById("word6").innerHTML;
var word7 = document.getElementById("word7").innerHTML;
font(word1, word2, word3, word4, word5, word6, word7);
if (word1 == "digg" && word2 == "face" && word3 == "book" && word4 == "tumbled" && word5 == "linked" && word6 == "interest" && word7 == "follow")
{
alert("Correct");
}
else
{
alert("Not Correct");
}
}
//if wrong word is entered, it should turn red
function font(word1, word2, word3, word4, word5, word6, word7)
{
if (word1 != "digg")
{
word1.style.color = "red";
}
else
{
word1.style.color = "white";
}
if (word2 != "face")
{
word2.style.color = "red";
}
else
{
word2.style.color = "white";
}
if (word3 != "book")
{
word3.style.color = "red";
}
else
{
word3.style.color = "white";
}
if (word4 != "tumbled")
{
word4.style.color = "red";
}
else
{
word4.style.color = "white";
}
if (word5 != "linked")
{
word5.style.color = "red";
}
else
{
word5.style.color = "white";
}
if (word6 != "interest")
{
word6.style.color = "red";
}
else
{
word6.style.color = "white";
}
if (word7 != "follow")
{
word7.style.color = "red";
}
else
{
word7.style.color = "white";
}
}
The problem is you are passing wrong object in the font function.
Remove the innerHtml from the assignment.
var word1 = document.getElementById("word1").innerHTML;
instead pass this object inside the font function
var word1 = document.getElementById("word1");
Because document.getElementById("word1").style is an object not document.getElementById("word1").innerhtml.style
But here you need innerhtml object
if (word1 == "digg" && word2 == "face" && word3 == "book" && word4 == "tumbled" && word5 == "linked" && word6 == "interest" && word7 == "follow")
{
alert("Correct");
}
else
{
alert("Not Correct");
}
In your font function you are sending innerHMTL value, so you cant change style for that innerHMTL.
Instead send document.getElementById("word1")
function isCorrect(){
var word1 = document.getElementById("word1");
var word2 = document.getElementById("word2");
var word3 = document.getElementById("word3");
var word4 = document.getElementById("word4");
var word5 = document.getElementById("word5");
var word6 = document.getElementById("word6");
var word7 = document.getElementById("word7");
font(word1, word2, word3, word4, word5, word6, word7);
if (word1.innerHTML == "digg" && word2.innerHTML == "face" && word3.innerHTML == "book" && word4.innerHTML == "tumbled" && word5.innerHTML == "linked" && word6.innerHTML == "interest" && word7.innerHTML == "follow")
{
alert("Correct");
}
else
{
alert("Not Correct");
}
}
//if wrong word is entered, it should turn red
function font(word1, word2, word3, word4, word5, word6, word7)
{
if (word1.innerHTML != "digg")
{
word1.style.color = "red";
}
else
{
word1.style.color = "white";
}
if (word2.innerHTML != "face")
{
word2.style.color = "red";
}
else
{
word2.style.color = "white";
}
if (word3.innerHTML != "book")
{
word3.style.color = "red";
}
else
{
word3.style.color = "white";
}
if (word4.innerHTML != "tumbled")
{
word4.style.color = "red";
}
else
{
word4.style.color = "white";
}
if (word5.innerHTML != "linked")
{
word5.style.color = "red";
}
else
{
word5.style.color = "white";
}
if (word6.innerHTML != "interest")
{
word6.style.color = "red";
}
else
{
word6.style.color = "white";
}
if (word7.innerHTML != "follow")
{
word7.style.color = "red";
}
else
{
word7.style.color = "white";
}
}
I sent complete DOM elements into font function.
Then inside that I compared the word1.innerHTML
There is a problem with my Javascript form validation where I'm trying to return true or false values but it is not working.It only returns the first if/else statements (whether it is true or false) and from there it doesn't work.Once you see the javascript code, you should understand what I am trying to do.
$('#button').click(function(){
name = $("#name").val(); //name input
age = $("#age").val(); //age input
sex = $("#sex").val(); // sex input
if(name.match(/(\w)\s(\w)/)){
return true;
}
else {
$('.form-row:first-child').css('border','1px solid red');
return false;
}
if (age < 0 || age > 130 || isNaN(age)) {
$('.form-row:nth-child(2)').css('border','1px solid red');
return false;
}
else {
return true;
}
if (sex == "male" || sex == "Male" || sex == "female" || sex == "Female"){
return true;
}
else {
$('.form-row:nth-child(3)').css('border','1px solid red');
return false;
}
});
Return will break out of the function. Instead, set a flag and return that flag at the end.
$('#button').click(function(){
returnFlag = false
name = $("#name").val(); //name input
age = $("#age").val(); //age input
sex = $("#sex").val(); // sex input
if(name.match(/(\w)\s(\w)/)){
returnFlag = true;
}
else {
$('.form-row:first-child').css('border','1px solid red');
returnFlag = false;
}
if (age < 0 || age > 130 || isNaN(age)) {
$('.form-row:nth-child(2)').css('border','1px solid red');
returnFlag = false;
}
else {
returnFlag = true;
}
if (sex == "male" || sex == "Male" || sex == "female" || sex == "Female"){
returnFlag = true;
}
else {
$('.form-row:nth-child(3)').css('border','1px solid red');
returnFlag = false;
}
return returnFlag;
});
Q: How to trigger event when val is changed from onkey event?
Problem: When change one input, other will change value, but don't change css.
JsFiddle: http://jsfiddle.net/6Qnbh/
$('.stat').val(0);
$(".stat").change(function () {
var val = $(this).val();
if (val > 0) {
$(this).css("border", "1px solid #0f0");
} else if (val < 0) {
$(this).css("border", "1px solid #f00");
} else {
$(this).css("border", "1px solid #000");
}
}).trigger("change");
/**/
$('.stat').keyup(function () {
var val = $(this).val();
if (val > 0) {
var num = Math.abs(val) * -1;
} else {
var num = Math.abs(val) * 1;
}
$('input[data-id=' + $(this).attr("data-link") + ']').val(num);
});
On this line
$('input[data-id=' + $(this).attr("data-link") + ']').val(num);
Add .trigger("change"); to ensure the change event is triggered:
$('input[data-id=' + $(this).attr("data-link") + ']').val(num).trigger("change");
Fiddle:
http://jsfiddle.net/6Qnbh/4/
You need to trigger the change event after setting the value. See your updated fiddle
$(function () {
$('.stat').val(0);
$(".stat").change(function () {
var val = $(this).val();
if (val > 0) {
$(this).css("border", "1px solid #0f0");
} else if (val < 0) {
$(this).css("border", "1px solid #f00");
} else {
$(this).css("border", "1px solid #000");
}
}).trigger("change");
/**/
$('.stat').keyup(function () {
var val = $(this).val();
if (val > 0) {
var num = Math.abs(val) * -1;
} else {
var num = Math.abs(val) * 1;
}
// I have added the .trigger('change') part here
$('input[data-id=' + $(this).attr("data-link") + ']').val(num).trigger('change');
});
});
function test(){
$(".stat").each(function () {
var val = $(this).val();
if (val > 0) {
$(this).css("border", "1px solid #0f0");
} else if (val < 0) {
$(this).css("border", "1px solid #f00");
} else {
$(this).css("border", "1px solid #000");
}
})
}
and call the function on keyup
DEMO
In your code, $(this) refers to the currently changed jQuery object.
An easy solution is:
$(".stat").change(function () {
var val = $(this).val();
if (val > 0) {
$('.stat').css("border", "1px solid #0f0");
} else if (val < 0) {
$('.stat').css("border", "1px solid #f00");
} else {
$('.stat').css("border", "1px solid #000");
}
Edit: depending on what you want to happen, #Anton may have the effect you are looking for; I wasn't certain what you need.
As for the reason why the other input box doesn't change, the explanation is still the same.