How to change the color of unreqiured field?

Question

0.00/5 (No votes)

See more:

I want to change the color of input if left blank.

I validate it to see if user enter what must be entered

HTML code:

HTML

<div class="span4">
<label for="companyname">Company Name:</label>				
<input type="text" id="companyname" name="companyname" type="hidden" autofocus />
<span class="form_hint">Company name number must be: E.g "iRecall Recordings"</span>				       
</div>

HTML

<pre lang="cs">onkeyup="checkCompanyname(this.value);"
                onblur="checkCompanyname(this.value);" value=""/>

My validation code:

C#

var status = document.getElementById("companyname");
var companyname = document.getElementById("companyname");

function checkCompanyname(companyname)
{

    var regCompanyname = /^[.@&]?[a-zA-Z0-9 ]+[ !.@&()]?[ a-zA-Z0-9!()]+/;

    if(regCompanyname.test(companyname) == false) {
    document.getElementById("companyname").style.backgroundColor="#FBBBB9";
    } else if(regCompanyname.test(companyname) == true) {
        document.getElementById("companyname").style.backgroundColor="#FFFFFF";
    }
}

If user does not enter anything on the input or live it blank, it should stay white in color. If user enter something it should change color to red, if input is correct, it must be white. This must happen only to fields that are not required.

So how can I accomplish this?

Posted 18-Nov-15 2:17am

iDoKin

Updated 18-Nov-15 2:26am

v5

Add a Solution

Comments

Krunal Rohit 18-Nov-15 8:34am

Your validation code look good, what's the issue ?

-KR

iDoKin 18-Nov-15 8:54am

Its good, my issue is to change the color on input to white, for in-stat let say I the curse is in the input for company, and I live the input blank, the color will be red, of which i don't want. If the field that is not required is left blank color must change to white if the curse was on the field, and move to other field.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

George Jonsson · Accepted Answer · 2015-11-18T15:30:00

Solution 1

Do you want the color to be red if the the field contains incorrect data and in all other cases it should be white?

If so, why not remove the else if and change it to else?

JavaScript

if(regCompanyname.test(companyname) == false) {
    document.getElementById("companyname").style.backgroundColor="#FBBBB9";
    } else {
        document.getElementById("companyname").style.backgroundColor="#FFFFFF";
}

[UPDATE]
Try this approach instead or a variant there of.

JavaScript

if (companyname == '') {
    document.getElementById("companyname").style.backgroundColor="#FFFFFF";
} else if(regCompanyname.test(companyname) == false) {
    document.getElementById("companyname").style.backgroundColor="#FBBBB9";
} else {
    document.getElementById("companyname").style.backgroundColor="#FFFFFF";
}

Posted 18-Nov-15 15:30pm

George Jonsson

Updated 20-Nov-15 14:31pm

v2

Comments

iDoKin 19-Nov-15 5:57am

I did try that, but it stays red, when the cursor move to other field.

George Jonsson 19-Nov-15 6:01am

That probably means that the function
function checkCompanyname(companyname)
is never called or that regCompanyname.test(companyname) always returns false.
Have you tried to debug the code?

iDoKin 20-Nov-15 7:30am

I have run a debug, it return false if nothing is entered inside the field if the cursor is on the field.

George Jonsson 20-Nov-15 20:31pm

I updated the solution. Maybe that will work for you.

iDoKin 23-Nov-15 1:46am

Thanks this worked like a charm.

George Jonsson 23-Nov-15 4:26am

You are welcome

iDoKin 23-Nov-15 4:29am

:D thanks a lot.

How to change the color of unreqiured field?

1 solution

Solution 1

Add your solution here

Preview 0

How to change the color of unreqiured field?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us