JQuery验证 - 动态表单字段消息

时间:2018-04-26 11:44:54

标签: javascript jquery jquery-validate

我正在使用JQuery Validate对我的表单进行验证。

$("#myform").validate({
    rules: {
        email: {
            customemail: true
        }
    },
    messages: {
        firstName: $('#' + requestTypeValue + '_' + 'firstName').attr('data-error'),
        lastName: $('#' + requestTypeValue + '_' + 'lastName').attr('data-error'),
        email: $('#email').attr('data-error')

    },

这很有效。但是现在我需要做一个更改,以便消息对象可以有一个基于全局变量的动态feild名称,所以我需要做这样的事情:

$("#myform").validate({
    rules: {
       "email": {
            customemail: true
        }
    },
    messages: {
         "myGlobalVar" + firstName: $('#' + requestTypeValue + '_' + 'firstName').attr('data-error'),
         "myGlobalVar" + lastName: $('#' + requestTypeValue + '_' + 'lastName').attr('data-error'),
         "myGlobalVar" + email: $('#email').attr('data-error')

    },

我在想,如果我在这个方法之外创建了消息对象,那么我最终会得到类似的东西,可能会起作用

$("#myform").validate({
    rules: {
       "email": {
            customemail: true
        }
    },
    messages: myMessageObject

    },

但是我仍然不确定以这种方式创建动态对象的语法。

想法好吗?

更新 Chirag Ravindra答案看起来就像我需要的所以我厌倦了,但它没有用。所以作为第一步,我基于 Chirag Ravindra回答

尝试了这个
$("#myform").validate({
    rules: {
        email: {
            customemail: true
        }
    },
    messages: {
        Prefix_firstName: $('#' + requestTypeValue + '_' + 'firstName').attr('data-error'),
        lastName: $('#' + requestTypeValue + '_' + 'lastName').attr('data-error'),
        email: $('#email').attr('data-error'),
        jobTitle: $('#' + requestTypeValue + '_' + 'jobTitle').attr('data-error'),
        company: $('#' + requestTypeValue + '_' + 'company').attr('data-error'),
        phone: $('#' + requestTypeValue + '_' + 'phone').attr('data-error'),
        comments: $('#' + requestTypeValue + '_' + 'comments').attr('data-error')
    },

这适用于Prefix_firstName字段,但这不起作用:

var validationMessages = {};

validationMessages =  {
            Prefix_firstName: $('#' + requestTypeValue + '_' + 'firstName').attr('data-error'),
            lastName: $('#' + requestTypeValue + '_' + 'lastName').attr('data-error'),
            email: $('#email').attr('data-error'),
            jobTitle: $('#' + requestTypeValue + '_' + 'jobTitle').attr('data-error'),
            company: $('#' + requestTypeValue + '_' + 'company').attr('data-error'),
            phone: $('#' + requestTypeValue + '_' + 'phone').attr('data-error'),
            comments: $('#' + requestTypeValue + '_' + 'comments').attr('data-error')
        },

        $("#myform").validate({
            rules: {
                email: {
                    customemail: true
                }
            },
            messages: validationMessages,

我真的不明白为什么只是将邮件移到某个对象会导致它失败......

1 个答案:

答案 0 :(得分:2)

我不确定这是有效的语法:

{
     "myGlobalVar" + firstName: $('#' + requestTypeValue + '_' + 'firstName').attr('data-error'),
     "myGlobalVar" + lastName: $('#' + requestTypeValue + '_' + 'lastName').attr('data-error'),
     "myGlobalVar" + email: $('#email').attr('data-error')

}

您可以使用数组表示法创建具有动态键的对象(如果这是您的意图):

var requestTypeValue = 'test';
var myGlobalPrefix = 'prefix_';
var myMessagesObject = {};

myMessagesObject[myGlobalPrefix+'firstname'] = $('#' + requestTypeValue + '_' + 'firstName').attr('data-error');

console.log(myMessagesObject);

/**
Output:
{
  "prefix_firstname": "Error Message"
}
**/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='test_firstName' data-error="Error Message"></div>

然后,您可以在验证方法中使用myMessagesObject处理程序

$("#myform").validate({
    rules: {
       "email": {
            customemail: true
        }
    },
    messages: myMessagesObject

 },...)