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>
html
,head
,body
tags from this View. YourShared/_Layout.cshtlml
will have those, and this view will render inside@RenderBody()
. BTW, your validation code works