?
Solved

jQuery Validation Plugin

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses
Course of the Month9 days, 21 hours left to enroll

571 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