Скрипт jQuery для отображения data-message

Question

Я использую валидатор jQuery () для отображения HTML-формы «data-message», если поле недействительно.Есть ли способ вызвать сообщение данных по команде?

Например, вместо того, чтобы мой JS выдавал предупреждение с

alert("Wrong file!");

, я бы хотел вместо этого показать data-message изФорма HTML.

Вот мое поле ввода файла формы:

<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

Будет получен атрибут data-message элемента формы:

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

Работает с jQuery 1.43 и выше.Смотрите документацию jQuery здесь .Поместите это в любой механизм ответа, который у вас есть для проверки (оповещение, всплывающее окно jQuery UI и т. Д.).

Похоже, вы используете 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

Если ваши входные данные являются частью формы загрузки, вы можете запустить проверку события изменения вместо события keyup, выполнив следующее:

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

Как вызвать ошибку, если файл не соответствует определенному имени файла, возможно, труднее сделать, но здесь много документации для этого плагина, начните читать его и посмотрите, найдете ли вы там что-нибудь