0

クライアント側でファイル サイズの検証を実行したいと思います。私はこれに非常に近いです。実際、検証自体は正常に機能しますが、送信をクリックするとメッセージが非表示になります。

$(document).ready(function () {
    $(".fileToUpload").change(function () {
        validate_recipe_image_upload(this);
    });
    $("form").submit(function () {
        $.each($(this).find(".fileToUpload"), function(i, v) {
            validate_recipe_image_upload(this);
        });
    });
});

String.prototype.format = function() {
    var s = arguments[0];
    for (var i = 0; i < arguments.length - 1; i++) {
        var reg = new RegExp("\\{" + i + "\\}", "gm");
        s = s.replace(reg, arguments[i + 1]);
    }

    return s;
};

function validate_recipe_image_upload(field) {
    var isValid = validate_image_size(field) &&
        validate_image_format(field);

    if (isValid)
        remove_error_message(field);
}

function validate_image_format(field) {
    var ext = $(field).val().split('.').pop().toLowerCase();
    var acceptabelExtensions = $(field).data("acceptableFormats").toLowerCase().split(',');
    if ($.inArray(ext, acceptabelExtensions) == -1) {
        var msg = String.prototype.format($(field).data("errorMsgFileFormat"), acceptabelExtensions.join(', '));
        append_error_message(field, msg);
        return false;
    } else {
        return true;
    }
}

function validate_image_size(field) {
    if (field.files[0].size > $(field).data("maxSize")) {
        append_error_message(field, $(field).data("errorMsgMaxSize"));
        return false;
    } else {
        return true;
    }
}

function append_error_message(field, msg) {
    var f = $(field);
    var sib = f.siblings();
    $.each(sib, function (i, v) {
        var name1 = $(v).data("valmsgFor");
        var name2 = f.attr("name");
        if (name1 == name2) {
            $(v).attr("class", "field-validation-error");
            $(v).text(msg);
            return;
        }
    });
}

function remove_error_message(field) {
    var f = $(field);
    var sib = f.siblings();
    $.each(sib, function (i, v) {
        var name1 = $(v).data("valmsgFor");
        var name2 = f.attr("name");
        if (name1 == name2) {
            $(v).attr("class", "field-validation-valid");
            return;
        }
    });
}

そしてcshtmlで：

<div class="editor-label">
            @Html.LabelFor(model => model.Photo)
            @*<label for="file">Filename:</label>*@
        </div>
        <div class="editor-field">
            <input type="file" id="Photo" name="Photo" accept="image/*" class="fileToUpload" data-error-msg-max-size="--Max size is 1MB" data-error-msg-file-format="--Only image files acceptable: {0}." data-max-size="1500000" data-acceptable-formats="jpg,jpeg,gif,png"/>
            @Html.ValidationMessageFor(model => model.Photo)
        </div>

基本的に、1MB を超えるファイルを選択すると、MVC の元のエラー メッセージと同様のエラー メッセージが表示されます。これまでのところは問題ありませんが、送信ボタンをクリックすると、このメッセージが消えます (MVC バリデータに対して有効であるため)。

これを処理するための賢いトリックはありますか?

4

1 に答える 1

0

フォーム送信リスナーから戻るfalseと、フォーム送信がブロックされます。

$("form").submit(function () {
    var isValid = true;
    $(".fileToUpload", this).each(function(i, v) {
        isValid = isValid && validate_recipe_image_upload(this);
    });
    return isValid;
});

function validate_recipe_image_upload(field) {
    var isValid = validate_image_size(field) &&
        validate_image_format(field);

    if (isValid)
        remove_error_message(field);

    return isValid;
}
于 2013-01-02T19:54:56.967 に答える