jQuery 当字段已填充时，有时验证将不起作用

Question

我的页面中有一个更新表单，并且所有文本框都已填入用户信息。我在我的站点中使用了 jquery-validation 插件。当表单没有任何默认值时，此插件可以正常工作。

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

你能帮帮我吗？

这是我的代码：

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部分

<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

也许您没有意识到 jQuery 验证插件是 "lazy"。这意味着 required 规则将被完全忽略，直到您首先单击提交按钮或填写一个字段，聚焦，然后返回并删除该字段。

否则，如果您想让我们尝试一个具体的例子，那么您需要向我们展示 渲染的 HTML 和 JavaScript 是浏览器看到的，而不是你的 PHP 加载视图。

如果您希望在载入已经包含值的表单后立即显示错误消息，则您需要使用 .valid() 方法以编程方式在页面加载时触发验证。

$(document).ready(function () {

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

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

});

演示：jsfiddle.net/p7L0r2yz/

jQuery 当字段已填充时，有时验证将不起作用

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

jquery

jquery-validate