当字段已经填充时，jQuery Validate 有时无法工作

我的页面中有一个更新表单，所有文本框都已填充用户信息。我用了jquery 验证 https://jqueryvalidation.org/我的网站中的插件。当表单没有任何默认值时，该插件可以正常工作而不会出现任何错误。

在我的表单中，有时错误消息显示我不知道发生了什么。例如，当我尝试删除文本框的某个值时，表单的初始加载中不会显示错误消息。但是，当我尝试删除另一个文本框的值并再次测试第一个文本框时，会显示错误消息。

你能帮助我吗？

这是我的代码：

配置文件.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="[email protected] /cdn-cgi/l/email-protection" 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>

也许您没有意识到 jQuery Validate 插件是“懒惰的”。这意味着required规则将被完全忽略，直到您第一次单击提交按钮或填写一个字段，聚焦，然后返回并删除该字段。

否则，如果您希望我们尝试一个特定的示例，那么您需要向我们展示rendered浏览器看到的 HTML 和 JavaScript，而不是 PHP 负载的视图。

如果您希望在加载已包含值的表单后立即显示错误消息，那么您需要使用以下方法以编程方式触发页面加载验证：.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/ http://jsfiddle.net/p7L0r2yz/