jQuery驗證插件，每個字段顯示多個錯誤消息

Question

今天在引導模態中使用驗證插件時才注意到此問題。 當不在模態中時，完全相同的代碼可以正常工作。 不知道這是怎么回事，但似乎它不會覆蓋以前的消息。

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 =“ x”，然后在每個輸入上指定id =“ x”。 這為我解決了問題。