Question

今天在引导程序模式中使用验证插件时就注意到了这个问题。当不在模态中时，完全相同的代码工作正常。不知道发生了什么，但看起来它似乎没有覆盖以前的消息。

example

HTML：

<div class="col-md-12 margin-bottom-30 form-group">
    <label class="f-14"><b>First Name :</b></label>
    <div class="input-group">
        <span class="input-group-addon">
            <i class="fa fa-user fa-fw"></i>
        </span>
        <input class="form-control" type="text" name="settings[fname]" <?php echo ($result['fname'] ? 'data-default="true" value="'.$result['fname'].'"' : ''); ?> placeholder="first name"/>
    </div>
</div>

JS：

errorElement: 'span', //default input error message container
errorClass: 'help-block', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
    'settings[fname]': {
        cname: true
    },
    'settings[lname]': {
        cname: true
    },
    'settings[company]': {
        ccompany: true
    },
    'settings[phone]': {
        required: true,
        cphone: true
    },
    'settings[username]': {
        required: true,
        cuser: true,
        rangelength: [5, 30],
        remote: {       
            url: "/spc_admin/process/p_check_username_change.php",  
            type: "post",
            data: {'original_username': originalUsername },
        }
    },
    'settings[email]': {
        required: true,
        cemail: true
    },
    'settings[password]': {
        rangelength: [10, 30],
        cpass: true
    }
},

messages: {
    'settings[fname]': {
        cname: "Enter a valid first name."
    },
    'settings[lname]': {
        cname: "Enter a valid last name."
    },
    'settings[company]': {
        ccompany: "Enter a valid company name."
    },
    'settings[phone]': {
        required: "Phone is required.",
        cphone: "Enter a valid phone number."
    },
    'settings[username]': {
        required: "Username is required.",
        cuser: "Enter a valid username.",
        rangelength: jQuery.validator.format("Enter between {0} and {1} characters.")
    },
    'settings[email]': {
        required: "Email is required.",
        cemail: "Enter a valid email."
    },
    'settings[password]': {
        rangelength: jQuery.validator.format("Enter between {0} and {1} characters.")
    }
},

highlight: function (element) { // hightlight error inputs
    $(element)
        .closest('.form-group').addClass('has-error');
},

unhighlight: function (element) { // un-hightlight error inputs
    $(element)
        .closest('.form-group').removeClass('has-error'); 
},

errorPlacement: function (error, element) {
    error.insertAfter(element.closest('.input-group'));
},
... and so on

自定义验证虽然无关紧要：

// custom name (first or last) validation
$.validator.addMethod("cname", function (value,element) {
    return this.optional(element) || /^[a-z][a-z\ \.\,\-]{0,31}$|^$/i.test(value);
},"Please enter a valid name.");

最新版本的模态是否存在问题？我不记得曾经发生过这样的事情，所以它就是冒出来的。当它不在模态中时，相同的代码工作正常。

Answer 1

似乎我需要指定一个for =＆＃34; x＆＃34;对于标签然后id =＆＃34; x＆＃34;在每个输入上。这解决了我的问题。

jquery验证插件，显示每个字段的多个错误消息

1 个答案: