当字段已经填充时，jQuery Validate有时将无法工作 [英] jQuery Validate won't work sometimes when the fields are already populated

问题描述

我的页面上有一个更新表单，并且所有文本框已经由用户信息填充.我在网站中使用了 jquery-validation 插件.如果表单没有任何默认值，则此插件可以正常工作.

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.

你能帮我吗?

这是我的代码:

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="[e-mail]" 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>

推荐答案

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

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.

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

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.

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

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

});

演示: jsfiddle.net/p7L0r2yz/

DEMO: jsfiddle.net/p7L0r2yz/

这篇关于当字段已经填充时，jQuery Validate有时将无法工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！