Form validation: error classes are assigned to different elements when using client-side and non-client-side validation

Archives Bug Discussions
1

If you use client-side-validation in CActiveForm it assigns the class "errorCssClass" to the element wrapping <label> and <input>. If you disable JavaScript and you submit the form the class "errorCss" will be assigned directly to <input> and <label>, so that you have to write your CSS two times, usually it should be no problem to unify the assigning of the class, either both to the element wrapping or both directly to the elements.

Example:

JS validation:




  <div class="ym-fbox-text ym-error"> <!-- here the errorCssClass -->

    <label for="ContactForm_email">E-Mail</label>

    <input type="text" id="ContactForm_email" name=

    "ContactForm[email]">

    <div style="" id="ContactForm_email_em_" class="errorMessage">

      E-Mail may not be empty.

    </div>

  </div>

JS disabled:




  <div class="ym-fbox-text"> 

    <label for="ContactForm_email" class="ym-error">E-Mail</label><!-- here the errorCss -->

    <input type="text" class="ym-error" value="" id=

    "ContactForm_email" name="ContactForm[email]"><!-- here the errorCss -->

    <div id="ContactForm_email_em_" class="errorMessage">

      E-Mail may not be empty.

    </div>

  </div>
2

This is by design… I remember it has already been discussed on the forum…

3

And there is no solution, in the moment I set errorCSS = null; and put something like this in the wrapper


$form->clientOptions[($this->model->hasErrors($attribute))?'errorCssClass':'successCssClass']

It’s not really nice but well working.

What is about client-side validation if the input/label has no wrapper? then it won’t work or?