Проверка формы JavaScript не работает вообще в приложении для загрузки файлов MVC - PullRequest
Новая
       1

Проверка формы JavaScript не работает вообще в приложении для загрузки файлов MVC

0 голосов
/ 14 апреля 2019

Похоже, что ни одна из проверок моей формы не работает для моего приложения MVC. Я создаю приложение MVC, которое имеет форму, которая загружает файл (должен быть только jpg) в папку и записывает местоположение и подробности о файле в базу данных. Моя загрузка работает, и я все пишу в базу данных, но моя проверка формы даже не работает. Я могу загрузить любой тип файла, который мне нужен, и он не обязателен для заполнения.

Я не уверен, где я ошибаюсь, так как это мое первое приложение MVC, которое я создал. 

@model GarbHelper.Models.Sources

@{
    ViewBag.Title = "Upload";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
    <html>
        <head>

            <script src="@Url.Content(" ~/Scripts/jquery-1.10.2.min.js ")" type="text/javascript"></script>
<script type="text/javascript">


    $(document).ready(function () {

        $("#Add").prop('disabled', true);
        $("#Image").change(function () {

            // Get uploaded file extension
            var extension = $(this).val().split('.').pop().toLowerCase();
            // Create array with the files extensions that we wish to upload
            var validFileExtensions = ['jpg'];
            //Check file extension in the array.if -1 that means the file extension is not in the list.
            if ($.inArray(extension, validFileExtensions) == -1) {
                alert("Sorry!! Upload only 'jpg' file")
                // Clear fileuload control selected file
                $(this).replaceWith($(this).val('').clone(true));
                //Disable Submit Button
                $('#Add').prop('disabled', true);
            }
            else {
                // Check and restrict the file size to 128 KB.
                if ($(this).get(0).files[0].size > (262144)) {
                    alert("Sorry!! Max allowed file size is 256 kb");
                    // Clear fileuload control selected file
                    $(this).replaceWith($(this).val('').clone(true));
                    //Disable Submit Button
                    $('#Add').prop('disabled', true);
                }
                else {
                    //Enable Submit Button
                    $('#Add').prop('disabled', false);
                }
            }
        });
            $("#Add").click(function() {
                if ($("#Wiki_Commons_Image_Link").val() = null || $("#Artist_Author").val() || $("#Title").val() || $("#Date_Of_Item").val() || $("#Medium").val() || $("#Location").val() | $("#Accession_Number").val() | $("#Source_URL").val() | $("#Description").val()) {
                    alert("Please fill out required fields(*)");
                    return false;
                }
                return true;
            });
        });
</script>
<style>

    <style >
    table,
    th,
    td {
        border: 1px solid black;
        padding: 15px;
    }

    thead {
        background-color: skyblue;
        color: white;
    }
</style>
</head>
<body>
    <div>
        @using (Html.BeginForm("Upload", "FileUpload", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {<br />
            <table cellpadding="5">
                <thead>
                    <tr>
                        <td colspan="2" style="text-align:center">Add a Source</td>
                    </tr>
                </thead>
                <tr>
                    <td colspan="2"> Please fill <span style="color:red">(*)</span> out below fields and click Submit to add a Source </td>
                </tr>
                <tr>
                    <td> @Html.LabelFor(m => m.Image)<b style="color:red"> *</b> </td>
                    <td> @Html.TextBoxFor(m => m.Image, new { type = "file" }) </td>
                </tr>
                <tr>
                    <td> @Html.LabelFor(m => m.Wiki_Commons_Image_Link)<b style="color:red"> *</b> </td>
                    <td> @Html.TextBoxFor(m => m.Wiki_Commons_Image_Link, new { @type = "url" }) </td>
                </tr>
                <tr>
                    <td> @Html.LabelFor(m => m.Artist_Author)<b style="color:red"> *</b> </td>
                    <td> @Html.TextBoxFor(m => m.Artist_Author, new { maxlength = 256 }) </td>
                </tr>
                <tr>
                    <td> @Html.LabelFor(m => m.Title)<b style="color:red"> *</b> </td>
                    <td> @Html.TextBoxFor(m => m.Title, new { maxlength = 256 }) </td>
                </tr>
                <tr>
                    <td> @Html.LabelFor(m => m.Date_Of_Item)<b style="color:red"> *</b> </td>
                    <td> @Html.TextBoxFor(m => m.Date_Of_Item, new { maxlength = 256 }) </td>
                </tr>
                <tr>
                    <td> @Html.LabelFor(m => m.Medium)<b style="color:red"> *</b> </td>
                    <td> @Html.TextBoxFor(m => m.Medium, new { maxlength = 256 }) </td>
                </tr>
                <tr>
                    <td> @Html.LabelFor(m => m.Location)<b style="color:red"> *</b> </td>
                    <td> @Html.TextBoxFor(m => m.Location, new { maxlength = 256 }) </td>
                </tr>
                <tr>
                    <td> @Html.LabelFor(m => m.Accession_Number)<b style="color:red"> *</b> </td>
                    <td> @Html.TextBoxFor(m => m.Accession_Number, new { maxlength = 256 }) </td>
                </tr>
                <tr>
                    <td> @Html.LabelFor(m => m.Source_URL)<b style="color:red"> *</b> </td>
                    <td> @Html.TextBoxFor(m => m.Source_URL, new { @type = "url" }) </td>
                </tr>
                <tr>
                    <td> @Html.LabelFor(m => m.Description)<b style="color:red"> *</b> </td>
                    <td> @Html.TextBoxFor(m => m.Description, new { maxlength = 15000 }) </td>
                </tr>


                <tr>
                    <td colspan="2" style="text-align:right"> <input type="submit" id="Add" value="Add" /> </td>
                </tr>
            </table>}
    </div>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 14 апреля 2019

Я считаю, что это не проблема Javascript, а проблема MVC о том, как представления отображаются на странице макета, так как я вижу, что у вас есть теги на отдельной странице просмотра, а не на странице макета.

По умолчанию /Views/Shared/_Layout.cshtml будет иметь теги html, head, body. Существует также метод HelperResult @RenderBody(), в котором будут отображаться все представления, использующие этот макет.

То есть вы ошибочно дублируете теги html, head, body внутри своего представления. Если вы просмотрели исходный код страницы на отображаемой странице, вы должны увидеть проблему.

Кроме того, поместите ваш скрипт внутри 

@section scripts{
  <script> 
       // Your script 
  </script>
}

Ваш макет должен иметь @RenderScript("scripts", required:false) около конца тега body, где будет отображаться ваш @section scripts.

0 голосов
/ 14 апреля 2019

В javascript вы можете добавить обработчик событий непосредственно к элементу, как показано ниже. <input type="submit" id="Add" value="Add" onSubmit="Validate()" />

или как эта функция <input type="submit" id="Add" value="Add" onSubmit="return Validate()" />

и Validate() возвращают true / false в зависимости от некоторых условий.Разница в том, что в первом возвращаемое значение игнорируется, но не во втором случае.

Или вы можете использовать event.stopPropagation().

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...