0

None of my form validation appears to be working for my MVC application. I am building an MVC application that has a form that uploads a file (supposed to be jpg only) to a folder and writes the location and details about the file to the database. My upload works and I everything writes to the database but my form validation does not even appear to be working. I am able to upload any file type I want and it does not seem to be enforcing mandatory fields.

I am not sure where I am going wrong as this is my first MVC application that I have built.

@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>
1
  • Remove html, head, body tags from this View. Your Shared/_Layout.cshtlml will have those, and this view will render inside @RenderBody(). BTW, your validation code works Apr 14, 2019 at 9:05

2 Answers 2

0

In javascript you can add event handler directly to the element as shown below. <input type="submit" id="Add" value="Add" onSubmit="Validate()" />

or like this <input type="submit" id="Add" value="Add" onSubmit="return Validate()" />

and Validate() function return true/false depending on some condition. The difference is, in the first one return value is ignored but not in second case.

Or you can use event.stopPropagation().

0

I believe this is not a Javascript issue but a MVC issue of how views are rendered in Layout page, as I can see you have tags in individual view page rather than a layout page.

By default /Views/Shared/_Layout.cshtml will have html,head, body tags. There is also a HelperResult @RenderBody() method where all the views that use's this layout will be rendered.

So you are erroneously duplicating html,head, body tags inside your view. If you did view page source on your rendered page, you should see the problem.

Also, place your script inside

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

Your Layout should have @RenderScript("scripts", required:false) near the end of the body tag, where your @section scripts will be rendered.

2
  • When I try to add the RenderScript section to my _Layout.cshtml I get a compilation error. I am not sure what I am missing.
    – Mike Z
    Apr 14, 2019 at 20:13
  • Did you try @RenderScript() ? This method is inside System.Web.WebPages namespace Apr 14, 2019 at 20:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.