Question

hi im using codeigniter to generate a form the form error only shows if there is an error for that field i to use twitter-bootstrap for styling so i need a way to add a class of error to both the div (with class=”clear fix”) and the input if (span class=”help-inline”) exists as child.

would prefer not to use query so it will degrade properly but any option would be good

any help would be great. hope that makes sense. code is below thanks

    <?php echo form_open('login'); ?>
    <fieldset>
    <div class="clearfix">
         <?php echo form_label('Email Address: ', 'email_address');?>
         <div class="input"><?php echo form_input('email_address', set_value('email_address'), 'id="email_address" class="xlarge" autofocus ');?>
         <?php echo form_error('email_address', '<span class="help-inline">', '</span>'); ?>
         </div>
    </div><!-- /clearfix -->
    <div class="clearfix">
         <?php echo form_label('Password: ', 'password');?>
         <div class="input"><?php echo form_input('password', '', 'id="password" class="xlarge"');?>
         <?php echo form_error('password', '<span class="help-inline">', '</span>'); ?>
         </div>
    </div><!-- /clearfix -->
    <div class="actions">
       <?php echo form_submit('submit', 'Login', 'class="btn primary"'); ?>
    </div>
    </fieldset>
    <?php echo form_close(); ?>

rendered html(if error is triggered)

<form action="http://unetics.site/index.php/login" method="post" accept-charset="utf-8">
    <div style="display:none">
        <input type="hidden" name="csrf_test_name" value="c0856f469b1f498480881a8512042ccf" />
    </div>
    <fieldset>
        <div class="clearfix">
            <label for="email_address">Email Address: </label>
            <div class="input">
                <input type="text" name="email_address" value="" id="email_address" class="xlarge" autofocus  />             
                <span class="help-inline">The Email Address field is required.</span>                   </div>
        </div><!-- /clearfix -->
        <div class="clearfix">
            <label for="password">Password: </label>
            <div class="input"><input type="text" name="password" value="" id="password" class="xlarge" />
                <span class="help-inline">The Password field is required.</span>
            </div>
        </div><!-- /clearfix -->
        <div class="actions">
            <input type="submit" name="submit" value="Login" class="btn primary" />
        </div>
    </fieldset>
</form> 

Answer 1

I’d suggest using:

$('.help-inline').closest('.clear-fix').addClass('error').end().prev('input').addClass('error');

JS Fiddle demo.

JS Fiddle demo, with your rendered html (note that I’ve changed the jQuery closest() to: closest('.clearfix')).

Or:

$('.clear-fix').each(
    function(){
        if ($(this).has('.help-inline')){
            $(this).addClass('error');
            $(this).find('input').addClass('error');
        }
     });

JS Fiddle demo.

JS Fiddle demo, with your rendered html (note that I’ve changed the jQuery selector to: $('.clearfix')).