CouchCMS • View topic - Add Class to form field on validation failure

carsenyoung · **Joined:** Mon Mar 07, 2011 2:18 am **Posts:** 4

I apologize in advance if this is an existing feature but I reviewed the docs and tried a few things on my own and couldn't make it work. What I'd like is to add a class to a form input when it fails validation (for instance, in order to put a red border around it).

I figured out a work around which is to add something along the lines of:

Code:

<cms:if k_error_email>
<style type="text/css">
#email{border:1px solid red}
</style>
</cms:if>

for every single field I want to validate, but it'd be preferable to be able to add a class on error and use a single style rule for all erred text fields.

KK · **Joined:** Wed Dec 01, 2010 5:35 pm **Posts:** 1395

Hi,

That can be easily achieved by the use of the regular 'if - else' tags.
As an example please take a look at the following -

Code:

<cms:input type="text"
    name="email"
    label='Email'
    maxlength="100"
    validator='email'
    required='1'
    class="required<cms:if k_error_email> myerror</cms:if>"
/>

Normally the code above will output this HTML

Code:

<input type="text" name="email"  id="email" value=""  maxlength="100" class="required"/>

However upon encountering error in submission, the 'if' block will kick in to add the 'myerror' class -

Code:

<input type="text" name="email"  id="email" value=""  maxlength="100" class="required myerror"/>

Please notice that within the 'if' block we have purposefully placed a space before 'myerror' string. Without this space the output would have been

Code:

<input type="text" name="email"  id="email" value=""  maxlength="100" class="requiredmyerror"/>

Do let me know if this helped.