Jquery表单验证:在自定义验证函数中添加错误消息

时间:2014-05-12 14:36:08

标签: javascript jquery jquery-validate

是否可以为自定义验证功能中的元素添加错误消息。

HTML:

<form action="#">
    <div id="appDiv">
        <input name="nEle" type="hidden" value="validate" />
    </div>
    <br/>
    <input name="nEle1" />
    <br/>
    <input name="nEle2" />
    <br/>
    <input name="nEle3" />
    <br/>
    <input name="nEle4" />
    <br/>
    <br/>
    <input type="submit" />
</form>

Jquery的:

(function (window, $) {
    function Plugin(ele, params) {
        return this;
    };
    Plugin.prototype = {
        isValid: function () {
            /* After some validation, suppose this raises error and returns false */
            return false;
        },
        getErrors: function () {
            /* The validation logic in "isValid" stores the error in the plugin context and this function gets the errors form it and returns */
            return "Error evaluated in plugin after its own validation.";
        }
    }
    $.fn.plugin = function (params) {
        var retval = this,
            initlist = this;
        initlist.each(function () {
            var p = $(this).data("plugindata");
            if (!p) {
                $(this).data('plugindata', new Plugin(this, params));
            } else {
                if (typeof params === 'string' && typeof p[params] === 'function') {
                    retval = p[params]();
                    initlist = false;
                }
            }
        });
        return retval || initlist;
    };
})(window, jQuery);

$.validator.addMethod("customValidation", function (value, element, jqPlugin) {
    if (!jqPlugin.plugin('isValid')) {
        var errorString = jqPlugin.plugin('getErrors');
        console.log("Error String : %s", errorString);
        alert("How to set this as error : " + errorString);
        /* How to display the error informaiton which is in the errorString ? */
        return false;
    }
    return true;
}, "Default custom validation message.");

$(document).ready(function () {
    var jqPlugin = $('#appDiv').plugin();
    $('form').validate({
        ignore: [],
        onkeyup: false,
        onclick: false,
        onfocusout: false,
        rules: {
            nEle: {
                required: true,
                customValidation: jqPlugin
            },
            nEle1: {
                required: true,
            },
            nEle2: {
                required: true,
            },
            nEle3: {
                required: true,
            },
            nEle4: {
                required: true,
            },
        },
        messages: {
            nEle: {
                customValidation: "Fix error with custom validation."
            }
        },
        submitHandler: function (form) {
            alert("Validaton Success..!!");
            return false;
        }
    });
});

Jquery - 一个可能的修复,只有增量:

$.validator.addMethod("customValidation", function (value, element, jqPlugin) {
    if (!jqPlugin.plugin('isValid')) {
        var errorString = jqPlugin.plugin('getErrors');
        console.log("Error String : %s", errorString);
        alert("How to set this as error : " + errorString);
        /* How to display the error informaiton which is in the errorString ? */
        this.errorList.push({
            message: errorString,
            element: element
        });
        this.errorMap[$(element).attr('name')] = status.error;
        //        return false;
    }
    return true;
}, "Default custom validation message.");

CSS:

div {
    width: 150px;
    height: 150px;
    border: 1px solid black;
    margin-bottom: 10px;
}

jsfiddle:

http://jsfiddle.net/m8eEs - 原始代码

http://jsfiddle.net/m8eEs/1/ - 为清晰起见而更新

http://jsfiddle.net/m8eEs/2/ - 我可能仍然不满意的可能修复,不确定这是否是唯一的方法.. !!

在上面我想在函数“customValidation”中为元素“nEle”添加错误消息。

已编辑:可能更好地添加此类问题的原因。 (直接从以下评论中复制)

我知道。但我需要在函数内添加错误消息。原因是,元素创造和验证(特定于应用程序的验证,不仅是支持的必需/数量/范围......)逻辑在单独的插件中完成(比如'X')。并且暴露一组API以获得验证状态和错误(如果有的话)。但是这个元素与通过'validation'插件验证的其他元素一起被分组。因此,简而言之,“customValidation”函数只是从“X”插件调用API并获得验证状态&amp;错误消息,如果有,但坚持显示它。

0 个答案:

没有答案