Overwriting the CSS parameters value using javascript

3
votes

I want to change the color of the input text box to red on some error. The code which i am given has a css style sheet and it just changes the color of all the textboxes to red if I want to use that style sheet. Is there a way round to sent the textbox border color to red. (Here I am not concerned how I will look for the error just want to know the type of attributes required to set the color of any individual textbox to red)

Here is the code for the text input

 <input name="count" 
 type="number" 
 walked="true" 
 autocomplete="off" 
 class="htmlplusinput numberinput novalue" 
 style="width: 24px; " 
 id="htmlplusinputnumberinput19" 
 hasobj="true" 
 novaluedisplay="number">

Here I also want to avoid using id to access this text box since the id's are dynamically changed. (I mean to say that the id htmlplusinputnumberinput19 will be other time htmlplusinputnumberinput789) so thats why a better solution will be if I can used some other parameter.

Here is the CSS style sheet which is applied to all the input textboxes on the page

 input[type="text"], .htmlplusinput {
  border: 1px solid gray;
  }
3
javascripthtmlcss
You might getter better response if you clarify your question: what is the stylesheet? What are the other non-standard (e.g. walked) for? Is there any way to know if a input is in error by just lookin at the attributes etc.? - dtech
Thanks for the response...I am not concerned about looking at the error..I just want to change the color of the textinput border...I have added the CSS code above.. - Judy
Then you should just change the "gray" into red, or in javascript: document.getElementsByTagName.each(function(input){input.style.borderColor = 'red'}); (ECMAScript5 but easy to do in older javascript) - dtech

3 Answers

6
votes

To give you advice on how to select the input element other than by its id, you need to provide more information about the markup of the page. It may work with something like this:

$('#example-form input[name=count]')

If you use jQuery, setting css attribute values is easy:

$('input[name=count]').css('border-color', 'red');

Also you may add an error class to the element:

$('input[name=count]').addClass('error');
5
votes

@Judy the best way I guess is your validation code point out the ID of troubled element. so, you can use some jQuery like that $('#myElementId').css('border-color', 'red');

4
votes

I would add a class to erroneous input.

CSS:

input.error { color: red; };

Javascript (on validation point) :

currentValidatingInput.className += " error";