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

var email1= form.email1.value;
var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email1)) {    
     document.getElementById("email1").style.color="red";
    if(language=="polish"){    
    form.email1.value="***Proszę wpisać poprawny email!";}
    else {form.email1.value="***Please enter the right email!";}
    document.getElementById("email1").style.color="black"; <--change back
return  false;             
}
 

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:

var email1= form.email1.value;
var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
 
if (!filter.test(email1)) {    
  document.getElementById("email1").style.color="red";
  thrower("***Please enter the right email!");
} else {
  document.getElementById("email1").style.color="black";
}
 

[oll3i]

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

[hsriat]

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

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.getElementById("email1").style.color=="re d"; 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.getElementById("email1").style.color=="re d"; 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,emails ){


var email1= form.email1.value;
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email1)) {
document.getElementById("email1").style.color="red ";
if(language=="polish"){
form.email1.value="***Proszę wpisać poprawny email!";}
else {form.email1.value="***Please enter the right email!";}

return false;
}



for(var i=0;i<emails.length;i++){
if(form.email1.value==emails[i]){
document.getElementById("email1").style.color="red ";
if(language=="polish") {form.email1.value = "***Podany email jest już w bazie danych!";}
else {form.email1.value = "***Email already exists in our database!";}
break;
return false;}
}





var email2= form.email2.value;

if (!filter.test(email2)) {
document.getElementById("email2").style.color="red ";
if(language=="polish"){
form.email2.value="***Proszę wpisać poprawny email!";}
else {form.email2.value="***Please enter the right email!";}
return false;
}

if(document.getElementById("email2").style.color== "red")
document.getElementById("email2").style.color=="bl ack";

if(!form.email1.value==form.email2.value){
document.getElementById("email2").style.color="red ";
if(language=="polish"){
form.email2.value="***Proszę wpisać poprawny email!";}
else { form.email2.value="***Please enter the right email!";}
return false;
}







if(form.email1.value.length==0 || form.email1.value=="***Proszę wpisać email!" || form.email1.value=="***Please enter email!"){
document.getElementById("email1").style.color="red ";
if(language=="polish"){
form.email1.value="***Proszę wpisać email!";}
else {form.email1.value="***Please enter email!";}
return false;
}


if(form.email2.value.length==0 || form.email2.value=="***Proszę wpisać email!" || form.email2.value=="***Please enter email!"){
document.getElementById("email2").style.color="red ";
if(language=="polish"){
form.email2.value="***Proszę wpisać email!";}
else {form.email2.value="***Please enter email!";}
return false;}

if(document.getElementById("email2").style.color== "red")
document.getElementById("email2").style.color=="bl ack";

if (form.password1.value.length==0 ||form.password1.value.length<8) {
document.getElementById("password1").style.border= "solid red 2px";

return false;
}
if(document.getElementById("password1").style.bord er=="solid red 2px")
document.getElementById("password1").style.border= ="solid #6480A4 1px";


if (form.password2.value.length==0 ||form.password2.value.length<8) {
document.getElementById("password2").style.border= "solid red 2px";

return false;
}






if(form.password1.value!=form.password2.value){
document.getElementById("password2").style.border= "solid red 2px";
return false;
}






if(form.name.value.length==0 || form.name.value=="***Proszę wpisać Imię i Nazwisko!" || form.name.value=="***Please enter firstname and lastname!" ){
document.getElementById("name").style.color="red";
if(language=="polish"){
form.name.value="***Proszę wpisać Imię i Nazwisko!";}
else {form.name.value="***Please enter firstname and lastname!";}
return false;
}




if(!IsNumeric(form.phone.value)){
document.getElementById("phone").style.color="red" ;
if(language=="polish"){
form.phone.value="***Proszę wpisać poprawny numer telefonu!";}
else {form.phone.value="***Please enter the right phone number!";}
return false;}


if(document.getElementById("phone").style.color==" red")
document.getElementById("phone").style.color=="bla ck";

if(form.phone.value.length==0 || form.phone.value=="***Prosze wpisać numer telefonu!" || form.phone.value=="***Please enter phone number!"){
document.getElementById("phone").style.color="red" ;
if(language=="polish"){
form.phone.value="***Proszę wpisać numer telefonu!";}
else {form.phone.value="***Please enter phone number!";}
return false;
}








for(var i=0;i<companyNames.length;i++){
if(form.company_name.value==companyNames[i]){
document.getElementById("company_name").style.colo r="red";
if(language=="polish") {form.company_name.value = "***Podana firma jest już zarejestrowana w bazie danych!";break;return false;}
else {form.company_name.value = "***Company name already exists in our database!";break;return false;}
}
}




if(form.company_name.value.length==0 || form.company_name.value=="***Proszę wpisać nazwę firmy!" || form.company_name.value=="***Please enter company name!"){
document.getElementById("company_name").style.colo r="red";
if(language=="polish"){
form.company_name.value="***Proszę wpisać nazwę firmy!";}
else {form.company_name.value="***Please enter company name!";}
return false;}




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

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




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

if(images[number]!=form.confirmation.value){
document.getElementById("confirmation").style.colo r="red";
if(language=="polish") {form.confirmation.value = "***Prosze wpisać poprawny kod!";}
else {form.confirmation.value = "***Please enter the right code!";}
return false;
}






return true;
}[code]

thank You

[oll3i]

it's a bit loooong

 
function checkForm(form,number,language,companyNames,emails){
 
 
var email1= form.email1.value;
var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email1)) {    
     document.getElementById("email1").style.color="red";
    if(language=="polish"){    
    form.email1.value="***Proszę wpisać poprawny email!";}
    else {form.email1.value="***Please enter the right email!";}
 
return  false;             
}
 
 
 
for(var i=0;i<emails.length;i++){
    if(form.email1.value==emails[i]){
        document.getElementById("email1").style.color="red";
        if(language=="polish") {form.email1.value = "***Podany email jest już w bazie danych!";}
        else {form.email1.value = "***Email already exists in our database!";}    
        break;
        return false;}
     }    
 
 
 
 
 
var email2= form.email2.value;
 
    if (!filter.test(email2)) {
        document.getElementById("email2").style.color="red";
         if(language=="polish"){
         form.email2.value="***Proszę wpisać poprawny email!";}         
         else {form.email2.value="***Please enter the right email!";}
return false;         
}  
 
if(document.getElementById("email2").style.color=="red")
    document.getElementById("email2").style.color=="black";
 
    if(!form.email1.value==form.email2.value){
         document.getElementById("email2").style.color="red";
         if(language=="polish"){
         form.email2.value="***Proszę wpisać poprawny email!";}         
         else { form.email2.value="***Please enter the right email!";} 
return  false;
}
 
 
 
 
 
 
 
if(form.email1.value.length==0 || form.email1.value=="***Proszę wpisać email!" || form.email1.value=="***Please enter email!"){
    document.getElementById("email1").style.color="red";
    if(language=="polish"){
    form.email1.value="***Proszę wpisać email!";}
    else {form.email1.value="***Please enter email!";}
return  false;
}
if(document.getElementById("email1").style.color=="red")
    document.getElementById("email1").style.color=="black";
 
if(form.email2.value.length==0 || form.email2.value=="***Proszę wpisać email!" || form.email2.value=="***Please enter email!"){
    document.getElementById("email2").style.color="red";
    if(language=="polish"){
    form.email2.value="***Proszę wpisać email!";}
    else {form.email2.value="***Please enter email!";}
return  false;}
 
if(document.getElementById("email2").style.color=="red")
    document.getElementById("email2").style.color=="black";
 
if (form.password1.value.length==0 ||form.password1.value.length<8) {
    document.getElementById("password1").style.border="solid red 2px";
 
return false;
}
 
 
 
if (form.password2.value.length==0 ||form.password2.value.length<8) {
    document.getElementById("password2").style.border="solid red 2px";
 
return false;
}
 
 
 
 
 
if(form.password1.value!=form.password2.value){
    document.getElementById("password2").style.border="solid red 2px";
return  false;
}
 
 
 
 
 
if(form.name.value.length==0 || form.name.value=="***Proszę wpisać Imię i Nazwisko!" ||  form.name.value=="***Please enter firstname and lastname!" ){
        document.getElementById("name").style.color="red";
        if(language=="polish"){        
        form.name.value="***Proszę wpisać Imię i Nazwisko!";}         
        else {form.name.value="***Please enter firstname and lastname!";}
return  false;
}
 
 
 
 
 
if(!IsNumeric(form.phone.value)){
    document.getElementById("phone").style.color="red";
        if(language=="polish"){        
        form.phone.value="***Proszę wpisać poprawny numer telefonu!";}         
        else {form.phone.value="***Please enter the right phone number!";}
return  false;}
 
 
if(document.getElementById("phone").style.color=="red")
    document.getElementById("phone").style.color=="black";
 
if(form.phone.value.length==0 || form.phone.value=="***Prosze wpisać numer telefonu!" || form.phone.value=="***Please enter phone number!"){
     document.getElementById("phone").style.color="red";
        if(language=="polish"){        
        form.phone.value="***Proszę wpisać numer telefonu!";}         
        else {form.phone.value="***Please enter phone number!";}
return  false;
}
 
 
 
 
 
 
 
 
for(var i=0;i<companyNames.length;i++){
    if(form.company_name.value==companyNames[i]){
        document.getElementById("company_name").style.color="red";
        if(language=="polish") {form.company_name.value = "***Podana firma jest już zarejestrowana w bazie danych!";break;return false;}
        else {form.company_name.value = "***Company name already exists in our database!";break;return false;}    
    }
    }
 
 
 
 
 
if(form.company_name.value.length==0 || form.company_name.value=="***Proszę wpisać nazwę firmy!" || form.company_name.value=="***Please enter company name!"){
    document.getElementById("company_name").style.color="red";
    if(language=="polish"){
    form.company_name.value="***Proszę wpisać nazwę firmy!";}
    else {form.company_name.value="***Please enter company name!";}
return  false;}
 
 
 
if(form.country.selectedIndex== 0){
hideShow('client_insert_alert_location');
return false;}
 
if(form.sector.selectedIndex== 0){
hideShow('client_insert_alert_sector');
return false;}
 
 
 
 
var images=new Array("AzBd1X","BdYC8o","Ug6iYp");
 
if(images[number]!=form.confirmation.value){
    document.getElementById("confirmation").style.color="red";
   if(language=="polish") {form.confirmation.value = "***Prosze wpisać poprawny kod!";}
   else {form.confirmation.value = "***Please enter the right code!";}
return  false;
}
 
 
 
 
 
 
return true;
}

[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]

function checkForm(form,number,language,companyNames,emails){
 
 
var email1= form.email1.value;
var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!filter.test(email1)) {    
     document.getElementById("email1").style.color="red";
    if(language=="polish"){    
    form.email1.value="***Proszę wpisać poprawny email!";}
    else {form.email1.value="***Please enter the right email!";}
 
return  false;             
}else {document.getElementById("email1").style.color="black";}
 
 
 
 
for(var i=0;i<emails.length;i++){
    if(form.email1.value==emails[i]){
        document.getElementById("email1").style.color="red";
        if(language=="polish") {form.email1.value = "***Podany email jest już w bazie danych!";}
        else {form.email1.value = "***Email already exists in our database!";}    
        break;
        return false;
     }    else {document.getElementById("email1").style.color="black";}
 
 
if(form.email1.value!=form.email2.value){
         document.getElementById("email2").style.color="red";
         if(language=="polish"){
         form.email2.value="***Proszę wpisać poprawny email!";}         
         else { form.email2.value="***Please enter the right email!";} 
return  false;
}else {document.getElementById("email2").style.color="black";}
 
var email2= form.email2.value;
 
    if (!filter.test(email2)) {
        document.getElementById("email2").style.color="red";
         if(language=="polish"){
         form.email2.value="***Proszę wpisać poprawny email!";}         
         else {form.email2.value="***Please enter the right email!";}
return false;         
}else {document.getElementById("email2").style.color="black";}  
 
 
 
 
 
 
 
 
 
 
 
if(form.email1.value.length==0 || form.email1.value=="***Proszę wpisać email!" || form.email1.value=="***Please enter email!"){
    document.getElementById("email1").style.color="red";
    if(language=="polish"){
    form.email1.value="***Proszę wpisać email!";}
    else {form.email1.value="***Please enter email!";}
return  false;
}else {document.getElementById("email1").style.color="black";}
 
 
 
 
if(form.email2.value.length==0 || form.email2.value=="***Proszę wpisać email!" || form.email2.value=="***Please enter email!"){
    document.getElementById("email2").style.color="red";
    if(language=="polish"){
    form.email2.value="***Proszę wpisać email!";}
    else {form.email2.value="***Please enter email!";}
return  false;
} else {document.getElementById("email2").style.color="black";}
 
 
 
if (form.password1.value.length==0 ||form.password1.value.length<8) {
    document.getElementById("password1").style.border="solid red 2px";
 
return false;
}else {document.getElementById("password1").style.border="solid #6480A4 1px";}
 
 
 
 
if (form.password2.value.length==0 ||form.password2.value.length<8) {
    document.getElementById("password2").style.border="solid red 2px";
 
return false;
}else {document.getElementById("password2").style.border="solid #6480A4 1px";}
 
 
 
 
 
if(form.password1.value!=form.password2.value){
    document.getElementById("password2").style.border="solid red 2px";
return  false;
}else {document.getElementById("password2").style.border="solid #6480A4 1px";}
 
 
 
 
 
if(form.name.value.length==0 || form.name.value=="***Proszę wpisać Imię i Nazwisko!" ||  form.name.value=="***Please enter firstname and lastname!" ){
        document.getElementById("name").style.color="red";
        if(language=="polish"){        
        form.name.value="***Proszę wpisać Imię i Nazwisko!";}         
        else {form.name.value="***Please enter firstname and lastname!";}
return  false;
}else {document.getElementById("name").style.color="black";}
 
 
 
 
if(!IsNumeric(form.phone.value)){
    document.getElementById("phone").style.color="red";
        if(language=="polish"){        
        form.phone.value="***Proszę wpisać poprawny numer telefonu!";}         
        else {form.phone.value="***Please enter the right phone number!";}
return  false;
}else {document.getElementById("phone").style.color="black";}
 
 
 
if(form.phone.value.length==0 || form.phone.value=="***Prosze wpisać numer telefonu!" || form.phone.value=="***Please enter phone number!"){
     document.getElementById("phone").style.color="red";
        if(language=="polish"){        
        form.phone.value="***Proszę wpisać numer telefonu!";}         
        else {form.phone.value="***Please enter phone number!";}
return  false;
}else {document.getElementById("phone").style.color="black";}
 
 
 
 
 
 
for(var i=0;i<companyNames.length;i++){
    if(form.company_name.value==companyNames[i]){
        document.getElementById("company_name").style.color="red";
        if(language=="polish") {form.company_name.value = "***Podana firma jest już zarejestrowana w bazie danych!";break;return false;}
        else {form.company_name.value = "***Company name already exists in our database!";break;return false;}    
    }else {document.getElementById("company_name").style.color="black";}
    }
 
 
 
 
if(form.company_name.value.length==0 || form.company_name.value=="***Proszę wpisać nazwę firmy!" || form.company_name.value=="***Please enter company name!"){
    document.getElementById("company_name").style.color="red";
    if(language=="polish"){
    form.company_name.value="***Proszę wpisać nazwę firmy!";}
    else {form.company_name.value="***Please enter company name!";}
return  false;
}else {document.getElementById("company_name").style.color="black";}
    }
 
 
 
 
if(form.country.selectedIndex== 0){
hideShow('client_insert_alert_location');
return false;}
 
if(form.sector.selectedIndex== 0){
hideShow('client_insert_alert_sector');
return false;}
 
 
 
 
var images=new Array("AzBd1X","BdYC8o","Ug6iYp");
 
if(images[number]!=form.confirmation.value){
    document.getElementById("confirmation").style.color="red";
   if(language=="polish") {form.confirmation.value = "***Prosze wpisać poprawny kod!";}
   else {form.confirmation.value = "***Please enter the right code!";}
return  false;
}else {document.getElementById("confirmation").style.color="black";}
    }
 
 
 
 
 
 
return true;
}
 

[hsriat]

There might be some problem with your algorithm.

Keep the general algorithm, like this..

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;

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

[oll3i]

thank You
it works now :)

[hsriat]

thank You
it works now :)

Glad to know that. :)