document.getElementById("id").style.color

[oll3i]

i'm writing javascript validator
and i change input font color when the input is incorrect
but i want this input font color to be changed back when the input is correct
i cannot do eg
[code=javascript]
var email1= form.email1.val ue;
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(e mail1)) {
document.getEle mentById("email 1").style.color ="red";
if(language=="p olish"){
form.email1.val ue="***Proszę wpisać poprawny email!";}
else {form.email1.va lue="***Please enter the right email!";}
document.getEle mentById("email 1").style.color ="black"; <--change back
return false;
}
[/code]
because even when the field has incorrect value the font color is black instead of red
thank You

[tswaters]

i change input font color when the input is incorrect but i want this input font color to be changed back when the input is correct

ah the beauty if the if/else statement. I think your polish language statement might be getting in the way..... you're basically saying if the email is invalid, set it to red, check the language & give the user a message... then set it back to black. it does all this in the blind of an eye.

Also, a message from a potential user filling out your form: "if i made a mistake on my email, I don't want to have it replaced with an error message, I want to see an error message next to the input".... anyway, i've replaced that part of it with a "thrower" function, which you can write yourself -- and can include the language statements

try this:

[code=javascript]
var email1= form.email1.val ue;
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

if (!filter.test(e mail1)) {
document.getEle mentById("email 1").style.color ="red";
thrower("***Ple ase enter the right email!");
} else {
document.getEle mentById("email 1").style.color ="black";
}
[/code]

[oll3i]

i tried this why but then the form goes to the action file i mean that the return false doesnt work

[hsriat]

[code=javascript]
var email1= form.email1.val ue;
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(e mail1)) {
document.getEle mentById("email 1").style.color ="red";
if(language=="p olish")
form.email1.val ue="***Proszę wpisać poprawny email!";
else
form.email1.val ue="***Please enter the right email!";
return false;
}
else {
document.getEle mentById("email 1").style.color ="black"; <--change back
return true;
}
[/code]

There's nothing wrong with the polish statement.

In line number 6 and 8, I think you may want to use alert, but I left the way it was.

[oll3i]

but in my validator i have lots of other fields to check and if i write return true(when checking first field) it will go to the action file and send it to database

[hsriat]

but in my validator i have lots of other fields to check and if i write return true(when checking first field) it will go to the action file and send it to database

Then don't return true there, but do it in the end of the function after applying all the validations.

[oll3i]

can i do document.getEle mentById("email 1").style.color =="red"; and then change it in to black if not how do i check what is the font color of input

[hsriat]

can i do document.getEle mentById("email 1").style.color =="red"; and then change it in to black if not how do i check what is the font color of input

I guess there's something wrong with your algorithm, can you please your code here.

[oll3i]

hmm it's a bit loooong

[code=javascript]
function checkForm(form, number,language ,companyNames,e mails){


var email1= form.email1.val ue;
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(e mail1)) {
document.getEle mentById("email 1").style.color ="red";
if(language=="p olish"){
form.email1.val ue="***Proszę wpisać poprawny email!";}
else {form.email1.va lue="***Please enter the right email!";}

return false;
}



for(var i=0;i<emails.le ngth;i++){
if(form.email1. value==emails[i]){
document.getEle mentById("email 1").style.color ="red";
if(language=="p olish") {form.email1.va lue = "***Podany email jest już w bazie danych!";}
else {form.email1.va lue = "***Email already exists in our database!";}
break;
return false;}
}





var email2= form.email2.val ue;

if (!filter.test(e mail2)) {
document.getEle mentById("email 2").style.color ="red";
if(language=="p olish"){
form.email2.val ue="***Proszę wpisać poprawny email!";}
else {form.email2.va lue="***Please enter the right email!";}
return false;
}

if(document.get ElementById("em ail2").style.co lor=="red")
document.getEle mentById("email 2").style.color =="black";

if(!form.email1 .value==form.em ail2.value){
document.getEle mentById("email 2").style.color ="red";
if(language=="p olish"){
form.email2.val ue="***Proszę wpisać poprawny email!";}
else { form.email2.val ue="***Please enter the right email!";}
return false;
}







if(form.email1. value.length==0 || form.email1.val ue=="***Proszę wpisać email!" || form.email1.val ue=="***Please enter email!"){
document.getEle mentById("email 1").style.color ="red";
if(language=="p olish"){
form.email1.val ue="***Proszę wpisać email!";}
else {form.email1.va lue="***Please enter email!";}
return false;
}


if(form.email2. value.length==0 || form.email2.val ue=="***Proszę wpisać email!" || form.email2.val ue=="***Please enter email!"){
document.getEle mentById("email 2").style.color ="red";
if(language=="p olish"){
form.email2.val ue="***Proszę wpisać email!";}
else {form.email2.va lue="***Please enter email!";}
return false;}

if(document.get ElementById("em ail2").style.co lor=="red")
document.getEle mentById("email 2").style.color =="black";

if (form.password1 .value.length== 0 ||form.password 1.value.length< 8) {
document.getEle mentById("passw ord1").style.bo rder="solid red 2px";

return false;
}
if(document.get ElementById("pa ssword1").style .border=="solid red 2px")
document.getEle mentById("passw ord1").style.bo rder=="solid #6480A4 1px";


if (form.password2 .value.length== 0 ||form.password 2.value.length< 8) {
document.getEle mentById("passw ord2").style.bo rder="solid red 2px";

return false;
}






if(form.passwor d1.value!=form. password2.value ){
document.getEle mentById("passw ord2").style.bo rder="solid red 2px";
return false;
}






if(form.name.va lue.length==0 || form.name.value =="***Proszę wpisać Imię i Nazwisko!" || form.name.value =="***Please enter firstname and lastname!" ){
document.getEle mentById("name" ).style.color=" red";
if(language=="p olish"){
form.name.value ="***Proszę wpisać Imię i Nazwisko!";}
else {form.name.valu e="***Please enter firstname and lastname!";}
return false;
}




if(!IsNumeric(f orm.phone.value )){
document.getEle mentById("phone ").style.color= "red";
if(language=="p olish"){
form.phone.valu e="***Proszę wpisać poprawny numer telefonu!";}
else {form.phone.val ue="***Please enter the right phone number!";}
return false;}


if(document.get ElementById("ph one").style.col or=="red")
document.getEle mentById("phone ").style.color= ="black";

if(form.phone.v alue.length==0 || form.phone.valu e=="***Prosze wpisać numer telefonu!" || form.phone.valu e=="***Please enter phone number!"){
document.getEle mentById("phone ").style.color= "red";
if(language=="p olish"){
form.phone.valu e="***Proszę wpisać numer telefonu!";}
else {form.phone.val ue="***Please enter phone number!";}
return false;
}








for(var i=0;i<companyNa mes.length;i++) {
if(form.company _name.value==co mpanyNames[i]){
document.getEle mentById("compa ny_name").style .color="red";
if(language=="p olish") {form.company_n ame.value = "***Podana firma jest już zarejestrowana w bazie danych!";break; return false;}
else {form.company_n ame.value = "***Company name already exists in our database!";brea k;return false;}
}
}




if(form.company _name.value.len gth==0 || form.company_na me.value=="***P roszę wpisać nazwę firmy!" || form.company_na me.value=="***P lease enter company name!"){
document.getEle mentById("compa ny_name").style .color="red";
if(language=="p olish"){
form.company_na me.value="***Pr oszę wpisać nazwę firmy!";}
else {form.company_n ame.value="***P lease enter company name!";}
return false;}




if(form.country .selectedIndex= = 0){
hideShow('clien t_insert_alert_ location');
return false;}

if(form.sector. selectedIndex== 0){
hideShow('clien t_insert_alert_ sector');
return false;}




var images=new Array("AzBd1X", "BdYC8o","Ug6iY p");

if(images[number]!=form.confirma tion.value){
document.getEle mentById("confi rmation").style .color="red";
if(language=="p olish") {form.confirmat ion.value = "***Prosze wpisać poprawny kod!";}
else {form.confirmat ion.value = "***Please enter the right code!";}
return false;
}






return true;
}[code]

thank You

[oll3i]

it's a bit loooong

[code=javascript]

function checkForm(form, number,language ,companyNames,e mails){


var email1= form.email1.val ue;
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(e mail1)) {
document.getEle mentById("email 1").style.color ="red";
if(language=="p olish"){
form.email1.val ue="***Proszę wpisać poprawny email!";}
else {form.email1.va lue="***Please enter the right email!";}

return false;
}



for(var i=0;i<emails.le ngth;i++){
if(form.email1. value==emails[i]){
document.getEle mentById("email 1").style.color ="red";
if(language=="p olish") {form.email1.va lue = "***Podany email jest już w bazie danych!";}
else {form.email1.va lue = "***Email already exists in our database!";}
break;
return false;}
}





var email2= form.email2.val ue;

if (!filter.test(e mail2)) {
document.getEle mentById("email 2").style.color ="red";
if(language=="p olish"){
form.email2.val ue="***Proszę wpisać poprawny email!";}
else {form.email2.va lue="***Please enter the right email!";}
return false;
}

if(document.get ElementById("em ail2").style.co lor=="red")
document.getEle mentById("email 2").style.color =="black";

if(!form.email1 .value==form.em ail2.value){
document.getEle mentById("email 2").style.color ="red";
if(language=="p olish"){
form.email2.val ue="***Proszę wpisać poprawny email!";}
else { form.email2.val ue="***Please enter the right email!";}
return false;
}







if(form.email1. value.length==0 || form.email1.val ue=="***Proszę wpisać email!" || form.email1.val ue=="***Please enter email!"){
document.getEle mentById("email 1").style.color ="red";
if(language=="p olish"){
form.email1.val ue="***Proszę wpisać email!";}
else {form.email1.va lue="***Please enter email!";}
return false;
}
if(document.get ElementById("em ail1").style.co lor=="red")
document.getEle mentById("email 1").style.color =="black";

if(form.email2. value.length==0 || form.email2.val ue=="***Proszę wpisać email!" || form.email2.val ue=="***Please enter email!"){
document.getEle mentById("email 2").style.color ="red";
if(language=="p olish"){
form.email2.val ue="***Proszę wpisać email!";}
else {form.email2.va lue="***Please enter email!";}
return false;}

if(document.get ElementById("em ail2").style.co lor=="red")
document.getEle mentById("email 2").style.color =="black";

if (form.password1 .value.length== 0 ||form.password 1.value.length< 8) {
document.getEle mentById("passw ord1").style.bo rder="solid red 2px";

return false;
}



if (form.password2 .value.length== 0 ||form.password 2.value.length< 8) {
document.getEle mentById("passw ord2").style.bo rder="solid red 2px";

return false;
}





if(form.passwor d1.value!=form. password2.value ){
document.getEle mentById("passw ord2").style.bo rder="solid red 2px";
return false;
}





if(form.name.va lue.length==0 || form.name.value =="***Proszę wpisać Imię i Nazwisko!" || form.name.value =="***Please enter firstname and lastname!" ){
document.getEle mentById("name" ).style.color=" red";
if(language=="p olish"){
form.name.value ="***Proszę wpisać Imię i Nazwisko!";}
else {form.name.valu e="***Please enter firstname and lastname!";}
return false;
}





if(!IsNumeric(f orm.phone.value )){
document.getEle mentById("phone ").style.color= "red";
if(language=="p olish"){
form.phone.valu e="***Proszę wpisać poprawny numer telefonu!";}
else {form.phone.val ue="***Please enter the right phone number!";}
return false;}


if(document.get ElementById("ph one").style.col or=="red")
document.getEle mentById("phone ").style.color= ="black";

if(form.phone.v alue.length==0 || form.phone.valu e=="***Prosze wpisać numer telefonu!" || form.phone.valu e=="***Please enter phone number!"){
document.getEle mentById("phone ").style.color= "red";
if(language=="p olish"){
form.phone.valu e="***Proszę wpisać numer telefonu!";}
else {form.phone.val ue="***Please enter phone number!";}
return false;
}








for(var i=0;i<companyNa mes.length;i++) {
if(form.company _name.value==co mpanyNames[i]){
document.getEle mentById("compa ny_name").style .color="red";
if(language=="p olish") {form.company_n ame.value = "***Podana firma jest już zarejestrowana w bazie danych!";break; return false;}
else {form.company_n ame.value = "***Company name already exists in our database!";brea k;return false;}
}
}





if(form.company _name.value.len gth==0 || form.company_na me.value=="***P roszę wpisać nazwę firmy!" || form.company_na me.value=="***P lease enter company name!"){
document.getEle mentById("compa ny_name").style .color="red";
if(language=="p olish"){
form.company_na me.value="***Pr oszę wpisać nazwę firmy!";}
else {form.company_n ame.value="***P lease enter company name!";}
return false;}



if(form.country .selectedIndex= = 0){
hideShow('clien t_insert_alert_ location');
return false;}

if(form.sector. selectedIndex== 0){
hideShow('clien t_insert_alert_ sector');
return false;}




var images=new Array("AzBd1X", "BdYC8o","Ug6iY p");

if(images[number]!=form.confirma tion.value){
document.getEle mentById("confi rmation").style .color="red";
if(language=="p olish") {form.confirmat ion.value = "***Prosze wpisać poprawny kod!";}
else {form.confirmat ion.value = "***Please enter the right code!";}
return false;
}






return true;
}[/code]

[hsriat]

Modify all the validations as I told you in my first post. Just don't write return true;.
Let that be in the end of the function as you have done.

[oll3i]

when i add else statement it works only with the first field
thank You

[oll3i]

[code=javascript]
function checkForm(form, number,language ,companyNames,e mails){


var email1= form.email1.val ue;
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(e mail1)) {
document.getEle mentById("email 1").style.color ="red";
if(language=="p olish"){
form.email1.val ue="***Proszę wpisać poprawny email!";}
else {form.email1.va lue="***Please enter the right email!";}

return false;
}else {document.getEl ementById("emai l1").style.colo r="black";}




for(var i=0;i<emails.le ngth;i++){
if(form.email1. value==emails[i]){
document.getEle mentById("email 1").style.color ="red";
if(language=="p olish") {form.email1.va lue = "***Podany email jest już w bazie danych!";}
else {form.email1.va lue = "***Email already exists in our database!";}
break;
return false;
} else {document.getEl ementById("emai l1").style.colo r="black";}


if(form.email1. value!=form.ema il2.value){
document.getEle mentById("email 2").style.color ="red";
if(language=="p olish"){
form.email2.val ue="***Proszę wpisać poprawny email!";}
else { form.email2.val ue="***Please enter the right email!";}
return false;
}else {document.getEl ementById("emai l2").style.colo r="black";}

var email2= form.email2.val ue;

if (!filter.test(e mail2)) {
document.getEle mentById("email 2").style.color ="red";
if(language=="p olish"){
form.email2.val ue="***Proszę wpisać poprawny email!";}
else {form.email2.va lue="***Please enter the right email!";}
return false;
}else {document.getEl ementById("emai l2").style.colo r="black";}











if(form.email1. value.length==0 || form.email1.val ue=="***Proszę wpisać email!" || form.email1.val ue=="***Please enter email!"){
document.getEle mentById("email 1").style.color ="red";
if(language=="p olish"){
form.email1.val ue="***Proszę wpisać email!";}
else {form.email1.va lue="***Please enter email!";}
return false;
}else {document.getEl ementById("emai l1").style.colo r="black";}




if(form.email2. value.length==0 || form.email2.val ue=="***Proszę wpisać email!" || form.email2.val ue=="***Please enter email!"){
document.getEle mentById("email 2").style.color ="red";
if(language=="p olish"){
form.email2.val ue="***Proszę wpisać email!";}
else {form.email2.va lue="***Please enter email!";}
return false;
} else {document.getEl ementById("emai l2").style.colo r="black";}



if (form.password1 .value.length== 0 ||form.password 1.value.length< 8) {
document.getEle mentById("passw ord1").style.bo rder="solid red 2px";

return false;
}else {document.getEl ementById("pass word1").style.b order="solid #6480A4 1px";}




if (form.password2 .value.length== 0 ||form.password 2.value.length< 8) {
document.getEle mentById("passw ord2").style.bo rder="solid red 2px";

return false;
}else {document.getEl ementById("pass word2").style.b order="solid #6480A4 1px";}





if(form.passwor d1.value!=form. password2.value ){
document.getEle mentById("passw ord2").style.bo rder="solid red 2px";
return false;
}else {document.getEl ementById("pass word2").style.b order="solid #6480A4 1px";}





if(form.name.va lue.length==0 || form.name.value =="***Proszę wpisać Imię i Nazwisko!" || form.name.value =="***Please enter firstname and lastname!" ){
document.getEle mentById("name" ).style.color=" red";
if(language=="p olish"){
form.name.value ="***Proszę wpisać Imię i Nazwisko!";}
else {form.name.valu e="***Please enter firstname and lastname!";}
return false;
}else {document.getEl ementById("name ").style.color= "black";}




if(!IsNumeric(f orm.phone.value )){
document.getEle mentById("phone ").style.color= "red";
if(language=="p olish"){
form.phone.valu e="***Proszę wpisać poprawny numer telefonu!";}
else {form.phone.val ue="***Please enter the right phone number!";}
return false;
}else {document.getEl ementById("phon e").style.color ="black";}



if(form.phone.v alue.length==0 || form.phone.valu e=="***Prosze wpisać numer telefonu!" || form.phone.valu e=="***Please enter phone number!"){
document.getEle mentById("phone ").style.color= "red";
if(language=="p olish"){
form.phone.valu e="***Proszę wpisać numer telefonu!";}
else {form.phone.val ue="***Please enter phone number!";}
return false;
}else {document.getEl ementById("phon e").style.color ="black";}






for(var i=0;i<companyNa mes.length;i++) {
if(form.company _name.value==co mpanyNames[i]){
document.getEle mentById("compa ny_name").style .color="red";
if(language=="p olish") {form.company_n ame.value = "***Podana firma jest już zarejestrowana w bazie danych!";break; return false;}
else {form.company_n ame.value = "***Company name already exists in our database!";brea k;return false;}
}else {document.getEl ementById("comp any_name").styl e.color="black" ;}
}




if(form.company _name.value.len gth==0 || form.company_na me.value=="***P roszę wpisać nazwę firmy!" || form.company_na me.value=="***P lease enter company name!"){
document.getEle mentById("compa ny_name").style .color="red";
if(language=="p olish"){
form.company_na me.value="***Pr oszę wpisać nazwę firmy!";}
else {form.company_n ame.value="***P lease enter company name!";}
return false;
}else {document.getEl ementById("comp any_name").styl e.color="black" ;}
}




if(form.country .selectedIndex= = 0){
hideShow('clien t_insert_alert_ location');
return false;}

if(form.sector. selectedIndex== 0){
hideShow('clien t_insert_alert_ sector');
return false;}




var images=new Array("AzBd1X", "BdYC8o","Ug6iY p");

if(images[number]!=form.confirma tion.value){
document.getEle mentById("confi rmation").style .color="red";
if(language=="p olish") {form.confirmat ion.value = "***Prosze wpisać poprawny kod!";}
else {form.confirmat ion.value = "***Please enter the right code!";}
return false;
}else {document.getEl ementById("conf irmation").styl e.color="black" ;}
}






return true;
}
[/code]

[hsriat]

There might be some problem with your algorithm.

Keep the general algorithm, like this..[code=javascript]Do Validation 1
If not valid {
turn color = red
if language is Polish {
show error in Polish
}
else { //if language is not polish
show error in English
}
return false
else { //if valid
turn color = black
}
Do Validation 2
If not valid {
turn color = red
if language is Polish {
show error in Polish
}
else { //if language is not polish
show error in English
}
return false
else { //if valid
turn color = black
}
Do Validation 3
If not valid {
turn color = red
if language is Polish {
show error in Polish
}
else { //if language is not polish
show error in English
}
return false
else { //if valid
turn color = black
}
//do all validations like this

return true;[/code]

Suggestion: Format your code properly so that in case there's any bug, its easily traceable.

[oll3i]

thank You
it works now :)