CODEWITHSUNDEEP
jquerycssvalidation
422
422

Reputation: 5770

validation css for select boxes

I am just finalising our form validations, and we fire css at input elements etc if they do not validate.

But not sure how to combat this for elements other than input.

For example, selects and radio and checkboxes.

Typically our js for this is :

For an Email field.

if(email == "") $('#email').css({"background":"#efefef","border":"1px solid #F12B63"});

just not sure why the css validation ( error ) does not work on select elements radios and checkboxes... any suggestions. Validation works, just not the css part

Upvotes: 0

Views: 1970

Answers (4)

Tony
Tony

Reputation: 53

Using Jquery you can simply change the border of the select (dropdown) input.

$('#selectId').parent().css('border-color','red');

Upvotes: 0

Lautaro Orazi
Lautaro Orazi

Reputation: 166

Option 1: You can change label color instead of changing input border.

Option 2: Use javascript, css and images to change appearance of checkboxes and radio buttons. There are a lot of tutorials.

let say you have this form:

<form method="post" action="/path/to/action" id="exampleForm">
  <div id="fullNameBlock">
    <label>Full Name:</label><input type="text" value="" name="fullname" >
  </div>
  <div id="emailBlock">
    <label>Email:</label><input type="text" value="" name="email" >
  </div> 
  <input type="submit" value="Send" >
</form>

and let say you validate on submit:

if( !validate() ) {

}

and your email is wrong. One option is to do something like this:

$("#emailBlock").find("label").css({color: "red"});

Also you can add a hidden message below the input:

<div id="emailBlock">
  <label>Email:</label><input type="text" value="" name="email" > <br>
  <span style="display:none;">Your email is invalid</span>
</div>

and show the message when there is an error:

$("#emailBlock").find("span").show();

You can check these guides for custom checkboxes and radio buttons:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/ http://www.dailycoding.com/Posts/customized_html_controls_creating_custom_checkbox.aspx http://blogs.digitss.com/javascript/jquery-javascript/jquery-fancy-custom-radio-and-checkbox/

Upvotes: 1

Saravanan S
Saravanan S

Reputation: 1043

The border property will not work for all form elements. You have to add a wrapper span/div around the select boxes. Alternative approach is to use outline property.

Upvotes: 1

Johan
Johan

Reputation: 35213

Try with the outline attribute instead: http://jsfiddle.net/Kqcx7/1/

Upvotes: 2

Related Questions