Solved

jQuery Validation Plugin

Posted on 2016-09-02
1
35 Views
Last Modified: 2016-09-03
I am using the jQuery Validation Plugin.  I am trying to apply CSS rules to inputs when there is an error.

This is the form input when there is an error:
<input type="text" class="wccpf-field form_error" name="mailing_address" id="mailing_address" value="" placeholder="">

Open in new window


My CSS
table.wccpf_fields_table td.wccpf_value input[type=text] {
    padding:3px 3px 3px 15px!important;
    border-radius:5px!important;
    color:#31708f;
}

Open in new window


My error CSS
.form_error {
    color:#ED4337;
    padding:3px 3px 3px 15px;
    border-radius:5px;
    border:solid 1px #FF9494!important;
    font-size:11px;
}

Open in new window


I can't get or understand how to add the form_error css to the input fields.
0
Comment
Question by:rgranlund
1 Comment
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
Comment Utility
Here is your working code as provided and estimated how your teable is set up http://jsbin.com/gohihatifu/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    table.wccpf_fields_table td.wccpf_value input[type=text] {
    padding:3px 3px 3px 15px!important;
    border-radius:5px!important;
    color:#31708f;
    
}
    .form_error {
    color:#ED4337;
    
    padding:3px 3px 3px 15px;
    border-radius:5px;
    border:solid 1px #FF9494!important;
    font-size:11px;
}
  </style>
  <title>JS Bin</title>
</head>
<body>
  <table class="wccpf_fields_table">
    <tr>
      <td class="wccpf_value">
        <input type="text" class="wccpf-field form_error" name="mailing_address" id="mailing_address" value="TEST VAL" placeholder="">

      </td>
    </tr>
  </table>


</body>
</html>

Open in new window



Here I have changed the style to only target the class of the input rather than the input  type of text http://jsbin.com/rejowokaka/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    .wccpf-field {
    padding:3px 3px 3px 15px!important;
    border-radius:5px!important;
    color:#31708f;
    
}
    .form_error {
    color:#ED4337;
    
    padding:3px 3px 3px 15px;
    border-radius:5px;
    border:solid 1px #FF9494!important;
    font-size:11px;
}
  </style>
  <title>JS Bin</title>
</head>
<body>
  <table class="wccpf_fields_table">
    <tr>
      <td class="wccpf_value">
        <input type="text" class="wccpf-field form_error" name="mailing_address" id="mailing_address" value="TEST VAL" placeholder="">

      </td>
    </tr>
  </table>


</body>
</html>

Open in new window


Notice it probably works as expected because order of operations with css interfered with how you expected the outcome to be.
https://www.w3.org/TR/css-cascade-3/
http://www.techrepublic.com/article/css-101-handling-multiple-rules-for-the-same-element/

In short, your first style in your original code was very specific down to the text field   table.wccpf_fields_table td.wccpf_value input[type=text] and your error class really needed to be added to the input like,  table.wccpf_fields_table td.wccpf_value  input[type=text].form_error


http://jsbin.com/vigucilojo/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    table.wccpf_fields_table td.wccpf_value input[type=text] {
    padding:3px 3px 3px 15px!important;
    border-radius:5px!important;
    color:#31708f;
    
}
     table.wccpf_fields_table td.wccpf_value  input[type=text].form_error {
    color:#ED4337;
    
    padding:3px 3px 3px 15px;
    border-radius:5px;
    border:solid 1px #FF9494!important;
    font-size:11px;
}
  </style>
  <title>JS Bin</title>
</head>
<body>
  <table class="wccpf_fields_table">
    <tr>
      <td class="wccpf_value">
        <input type="text" class="wccpf-field form_error" name="mailing_address" id="mailing_address" value="TEST VAL" placeholder="">

      </td>
    </tr>
  </table>


</body>
</html> 

Open in new window

0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now