jQuery Validate won't work sometimes when the fields are already populated

Question

I have an update form in my page and all of the textboxes are already populated by user's information. I used jquery-validation plugin in my site. When the form doesn't have any default values this plugin works without any errors.

In my form, sometimes the error messages shows I don't know what happened. Example in the initial load of the form when I try to remove a certain value for a textbox the error message won't show. But when I try to remove the value of the other textbox and test again the first textbox the error message shows.

Can you help me?

Here's my code:

profile.php

<div class="col-sm-6">
    <div class="panel panel-av">
        <div class="panel-heading">
            <p>PROFILE UPDATE</p>
        </div>
        <div class="panel-body">
            <?php echo form_open('member/update', array('id' => 'member-update', 'role' => 'form')); ?>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Desired Username</label>
                            <input type="text" class="form-control input-sm show_popover" name="username" placeholder="username" data-toggle="popover" data-trigger="focus" data-placement="top" data-content="This will be use for security purposes." value="<?php echo set_value('username', $detail['username']); ?>" />
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Email Address</label>
                            <input type="text" class="form-control input-sm show_popover" name="email" placeholder="avjunky@email.com" data-toggle="popover" data-trigger="focus" data-placement="top" data-content="This will be use to email you for more updates." value="<?php echo set_value('email', $detail['email']); ?>"/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Last Name</label>
                            <input type="text" class="form-control input-sm" name="lastname" placeholder="your lastname" value="<?php echo set_value('lastname', $detail['lastname']); ?>" />
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>First Name</label>
                            <input type="text" class="form-control input-sm" name="firstname" placeholder="your firstname" value="<?php echo set_value('firstname', $detail['firstname']); ?>" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-right">
                        <hr />
                        <button type="button" class="btn btn-av btn-sm">UPDATE ACCOUNT</button>
                    </div>
                </div>
            <?php echo form_close(); ?>
        </div>
    </div>
</div>

JS part

<script type="text/javascript">
    $('#member-update').validate({
        rules: {
            username: {
                required: true,
                minlength: 6,
                remote: {
                    url: "<?php echo site_url('members/member/checkUsername'); ?>",
                    type: 'post',
                    data: {username: $('input[name="username"]').val(), selector: "<?php echo $this->input->get('user'); ?>"},
                },
            },
            email: {
                required: true,
                email: true
            },
            lastname: {
                required: true
            },
            firstname: {
                required: true
            }
        },
        messages: {
            username: {
                required: "The username is required",
                remote: "The username is already taken",
            },
            email: "Your email address is required",
            lastname: "Your lastname is required",
            firstname:"Your firstname is required"
        },

    });
</script>

Answer 1

Maybe you didn't realize that the jQuery Validate plugin is "lazy". This means that required rules are totally ignored until you first click the submit button OR you fill out a field, focus out, then go back and delete the field.

Otherwise, if you want us to try a specific example, then you'll need to show us the rendered HTML and JavaScript as seen by the browser, not your PHP laden view.

If you want the error messages to appear as soon as the form already containing values loads, then you'll need to programmatically trigger validation on page load using the .valid() method.

$(document).ready(function () {

    $('#myform').validate({  // initialize the plugin
        // rules & options
    });

    $('#myform').valid();    // trigger a validation test on page load

});

DEMO: jsfiddle.net/p7L0r2yz/