Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Styling to highlight form validation errors with CSS

    I'm trying to style the results of a form's validation when there are errors. I'm using Shopp in Wordpress. So far, I've figured out how to get the erroneous fields to change (highlight) background colors, only I haven't been able to make this work for fields in which there is a drop-down rather than just an input box. Here's the code that works. Hopefully this is enough info to go on:

    Code:
     #shopp form .required {
    background-color: #a8d5d5;
        }
    
        #shopp form input.error {
    background-color: #FFC5B0;
        }
    Thanks for your help!

    Amy

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Can we see some html code? Plus i'm finding it hard to follow what you would like done.

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks for asking!

    Here's the form in question

    If you put an item in the shopping cart and hit checkout you'll see the form in question.

    If you try leaving fields blank on the form, you will see that they turn pink when you try to checkout. I can't figure out how to get the dropdown fields (State or Province) to do the same. I also don't know how to get a message to show up that alerts the user to the errors in the form (though I know that latter thing is not a CSS issue).

    I built this with Wordpress and the Shopp plugin and am not sure how to access the HTML (only the parsed HTML via Firebug) but this an example of what I've got when I try submitting a blank form...

    Code:
    <div class="left">
    <input id="shipping-city" class="required disabled" type="text" value="12 Bolduk Lane" title="City shipping address" name="shipping[city]" disabled="disabled">
    <label for="shipping-city">City</label>
    </div>
    <div class="right">
    <select id="shipping-state-menu" class="required shipping-state disabled" title="State/Provice/Region shipping address" name="shipping[state]" style="display: inline;" disabled="disabled">
    <input id="shipping-state" class="required shipping-state disabled" type="text" value="CT" title="State/Provice/Region shipping address" name="shipping[state]" disabled="disabled" style="display: none;">
    <label for="shipping-state">State / Province</label>
    </div>

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Try
    Code:
     #shopp form .required {
    background-color: #a8d5d5;
        }
    
        #shopp form input.error input[type="text"], select{
    background-color: #FFC5B0;
        }

  • #5
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Nope. That doesn't highlight the error but it does highlight the drop down menu on the previous (/cart) page in the field that says "estimate shipping & taxes for:" even though there is no way to have an error in that field because you can't leave it blank! Weird.

    Any other ideas?

  • #6
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    9
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Also I tried a correction, added missing comma to this line:

    Code:
        #shopp form input.error, input[type="text"], select{
    background-color: #FFC5B0;
        }
    Still no highlight to the state/province field. And now it highlights every blank field instead of just the erroneous required fields. Hmm...

  • #7
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello,

    Did you try
    Code:
    #shopp select.error {
    background-color: #FFC5B0;
        }
    ?

    It has to be placed after
    Code:
     #shopp form .required {
    background-color: #a8d5d5;
        }
    as the selector's specificity is the same or you can add "form" in the selector to make it more specific.
    Last edited by Candygirl; 08-20-2012 at 11:33 PM.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •