Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

jQuery Validation Plugin

Posted on 2016-09-02
1
Medium Priority
?
67 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 54

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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

596 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