Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 74
  • Last Modified:

jQuery Validation Plugin

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
rgranlund
Asked:
rgranlund
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now