Question

I’m using Codeigniter framework to create my web application.

I have a login form for the users to input their username and password as well as a remember me checkbox. After the user submits the form it uses jQuery ajax to submit the form and send the post data to the login controller submit function for data checking and manipulation. After the submit function is ran a JSON array is returned if the user was logged in. If the user is successfully logged in he/she is sent to the dashboard and if they weren’t logged in successfully then an error message is displayed for the user to let them know something went wrong.

What I would like is for the validation rules that do not pass on the php side for them to display under the corresponding input fields just like it does on the jQuery form validation. I’m running both validations just in case something eludes me jQuery side and PHP catches it and fixes the problem.

As of right now it displays a message saying it didn’t pass validation but I’m having an issue with figuring out how to display the validation rule that didn’t pass under the user input box.

This is the JSON returned message from php as of right now. So right now its saying that there was an error and that it lets the user know the form didn’t validation and includes the error messages that are the reason why it didn’t validate.

{"output_status":"Error","output_title":"Form Not Validated","output_message":"The form did not validate successfully!","error_messages":{"username":"This is not have an accepted value!"}}

<div style="display:none"  id="message_container"><button type="button" class="close" data-dismiss="alert">&times;</button></div>
<div class="login_container">
<?php $attributes = array('id' => 'login_form', 'class' => 'form-horizontal'); ?>
<?php echo form_open('login/submit', $attributes); ?>
<div class="form-row row-fluid">
    <div class="spa12">
        <div class="row-fluid">
            <?php $attributes = array('class' => 'form_label span12'); ?>
            <?php echo form_label('Username<span class="icon16 icomoon-icon-user-3 right gray marginR10"></span>', 'username', $attributes); ?>
            <?php $attributes = array('name' => 'username', 'id' => 'username', 'value' => '', 'class' => 'span12 text valid'); ?>
            <?php echo form_input($attributes); ?>
        </div>
    </div>
</div>
<div class="form-row row-fluid">
    <div class="span12">
        <div class="row-fluid">
            <?php $attributes = array('class' => 'form_label span12'); ?>
            <?php echo form_label('Password<span class="icon16 icomoon-icon-locked right gray marginR10"></span><span class="forgot"><a href="#">Forgot your password?</a></span>', 'password', $attributes); ?>
            <?php $attributes = array('name' => 'password', 'id' => 'password', 'value' => '', 'class' => 'span12 password'); ?>
            <?php echo form_password($attributes); ?>
        </div>
    </div>
</div>
<div class="form-row row-fluid">                       
    <div class="span12">
        <div class="row-fluid">
            <div class="form-actions">
                <div class="span12 controls">
                    <input type="checkbox" id="keepLoged" value="Value" class="styled" name="logged" />Keep me logged in
                    <button type="submit" class="btn btn-info right" id="loginBtn">
                        <span class="icon16 icomoon-icon-enter white"></span>
                        Login
                    </button>
                </div>
            </div>
        </div>
    </div> 
</div>
</form>
</div>

Answer 1

you could do this. On the php side wherever validation fails return the error message along with the field name
then use the field name to select in jQuery and append the error message

$(fieldname).append(<span>error</span>);