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