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 Validate插件是“懒惰的”。这意味着在您第一次单击“提交”按钮或填写一个字段，焦点，然后返回并删除该字段之前，required规则将被完全忽略。

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

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

$(document).ready(function () {

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

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

});

DEMO：jsfiddle.net/p7L0r2yz/

当字段已经填充时，jQuery Validate有时不起作用

1 个答案: