javascript - How to add a class to "li" element using role="alter" as triger -


i have wp website , use plugin called "contact form 7" create form. provide shortcodes had use html in order work client's website.

the form uses aria , role="alter" display error messages when validation fails. need change design of boxes failed validate, cannot find way add class.

here's html:

<div class="browser_gecko form_wrapper wpcf7" id="wpcf7-f46-p47-o1" lang="en-us" dir="ltr">              <div class="screen-reader-response"></div>              <form action="/form/#wpcf7-f46-p47-o1" method="post" class="wpcf7-form" novalidate="novalidate">              <div style="display: none;">         <input type="hidden" name="_wpcf7" value="46" />         <input type="hidden" name="_wpcf7_version" value="4.1.1" />         <input type="hidden" name="_wpcf7_locale" value="en_us" />         <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f46-p47-o1" />         <input type="hidden" name="_wpnonce" value="229223424d" />          </div>          <div class="wpcf7-response-output wpcf7-display-none validation_error"></div>              <div class='form_body'>                <ul class='form_fields top_label description_below'>                  <li class='field field_contains_required' >                    <label class='field_label'>name<span class='field_required'>*</span></label>                    <div class='input_container'><input type='text' name='your-name' class="large wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" tabindex='1' /></div>                    </li>                    <li class='field'><label class='field_label'>company</label>                    <div class='input_container'><input type='text' name='company' class="large wpcf7-form-control wpcf7-text" aria-invalid="false" tabindex='2' /></div>                    </li>                    <li id='field_4' class='field field_contains_required' ><label class='field_label'>email<span class='field_required'>*</span></label>                    <div class='input_container'><input type='email' name='your-email' class="large pcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" tabindex='3' aria-required="true" aria-invalid="false" /></div></li>                    <li id='field_5' class='field field_contains_required'><label class='field_label'>inquiry<span class='field_required'>*</span></label>                    <div class='input_container'><textarea name='your-message' tabindex='4' rows='10' cols='50' class="textarea medium wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false"></textarea></div></li>                                     </ul>               </div>         <div class='form_footer top_label'><input type='submit' value='submit' class="button gform_button wpcf7-form-control wpcf7-submit" /></div>                                 </form>                         </div>            

i want add class "form_error" "li" elements when validation fails. how can achieve this?

you can write css rule looks role attribute, example:

[role=alter] {    color: red;  }
<ul>    <li role="alter">i altered</li>    <li>i not altered</li>  </ul>

reference: http://www.w3.org/tr/css3-selectors/#attribute-selectors


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -