Question

我使用jQuery validator（）来显示HTML表单＆＃39; data-message＆＃39;如果该字段无效。有没有办法按命令调用数据消息？

例如，而不是我的JS用

投掷警报

alert("Wrong file!");

我希望从HTML表单中显示data-message。

这是我的表单输入文件字段：

<input type="file" name="orders_csv" id="orders_csv"  required="required" data-message="Please attach the morders.csv file.">

这是我目前的JS：

$(document).ready(function () {
    $("#upload-form").validator({
        position: 'top center',
        offset: [-12, 40],
        relative: true,
        accept: "csv",
        message: '<div><em></em></div>'
    })
    // make sure that mcust.csv is the attached file. If not, throw alert message
    $("input#dealers_csv").on("change", function() {
        $('#loader').hide();
        var dealers = $("input#dealers_csv");
        var arrfilepath = dealers.val().split("\\");
        var filename = arrfilepath[arrfilepath.length - 1];
        if (filename != "mcust.csv") {
            alert($("#dealers_csv").data("message"));
            dealers.val('');
        }
    });
    // make sure that morders.csv is the attached file. If not, throw alert message
    $("input#orders_csv").on("change", function() {
        $('#loader').hide();
        var orders = $("input#orders_csv");
        var arrfilepath2 = orders.val().split("\\");
        var filename2 = arrfilepath2[arrfilepath2.length - 1];
        if (filename2 != "morders.csv") {
            alert($("#orders_csv").data("message"));
            orders.val('');
        }
    });

Answer 1

这将获取表单元素的数据消息属性：

$("#orders_csv").data("message")

适用于jQuery 1.43及更高版本。请参阅jQuery docs here。把它放在你的验证响应机制中（alert，jQuery UI popup等）。

您正在使用jQuery Tools进行验证。要执行您想要的操作，要获得正确的工具提示，您需要实际向验证程序添加验证例程。以下是我认为它应该如何：

$.tools.validator.fn("#dealers_csv, #orders_csv", function(element, value) {
    var correctFilename = (element.attr("id") === "dealers_csv" ? "mcust.csv" : "morders.csv"),
        $element = $(element),
        filename = value.split("\\").pop();
    if (filename !== correctFilename) {
        return $element.attr("data-message");
    } else {
        return true;
    }
});

在致电$("#upload-form").validator()后添加此验证例程。并删除大多数.change()事件处理程序，只留下以下内容：

$("input#dealers_csv, input#orders_csv").on("change", function() {
    $('#loader').hide();
});

这是完整的代码：

$(document).ready(function () {
    $("#upload-form").validator({
        position: 'top center',
        offset: [-12, 40],
        relative: true,
        accept: "csv",
        message: '<div><em></em></div>'
    });
    // the custom validation routine, checking only those elements with the ids in the selector
    $.tools.validator.fn("#dealers_csv, #orders_csv", function(element, value) {
        var correctFilename = (element.attr("id") === "dealers_csv" ? "mcust.csv" : "morders.csv"),
            $element = $(element),
            filename = value.split("\\").pop();
        if (filename !== correctFilename) {
            return $element.attr("data-message");
        } else {
            return true;
        }
    });
    // new, simplified event handler, to clear the "#loader" element when there's a change to the upload inputs
    $("#dealers_csv, #orders_csv").on("change", function() {
        $('#loader').hide();
    });
});

此代码与原始代码之间的主要区别在于，当上传输入验证失败时，它不会清除它们中的值;你以前的版本。我认为清除输入与验证是对立的，并且错误地将其置于验证程序中。

Answer 2

替换你的每个

alert("...");

与

alert($(this).attr("data-message"));

Answer 3

如果您的文件输入是上传表单的一部分，您可以通过执行以下操作触发对change事件的验证而不是keyup事件：

$("#upload-form").validator({
    errorInputEvent: 'change',
    position: 'top center',
    offset: [-12, 40],
    relative: true,
    accept: "csv",
    message: '<div><em></em></div>'
});

如果文件与某个文件名不匹配，如何触发错误可能更难，但这个插件有很多documentation，开始阅读它，看看你是否找到了什么？< / p>

用于显示数据消息的jQuery脚本

3 个答案: