Styling to highlight form validation errors with CSS

machepap · 08-19-2012, 11:21 PM

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

tempz · 08-19-2012, 11:27 PM

Can we see some html code? Plus i'm finding it hard to follow what you would like done.

machepap · 08-19-2012, 11:44 PM

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>

tempz · 08-20-2012, 02:39 AM

Try

Code:

 #shopp form .required {
background-color: #a8d5d5;
    }

    #shopp form input.error input[type="text"], select{
background-color: #FFC5B0;
    }

machepap · 08-20-2012, 03:14 AM

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?

machepap · 08-20-2012, 03:25 AM

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...

Candygirl · 08-20-2012, 10:30 PM

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.