?
Solved

jQuery Validation Plugin

Posted on 2016-09-02
1
Medium Priority
?
65 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 41782458
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

Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month12 days, 21 hours left to enroll

777 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