我的表单验证似乎都不适用于我的 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>
在javascript中，你可以将事件处理程序直接添加到元素中，如下所示。
<input type="submit" id="Add" value="Add" onSubmit="Validate()" />
或者像这样<input type="submit" id="Add" value="Add" onSubmit="return Validate()" />
并且Validate()函数根据某些条件返回真/假。不同之处在于，在第一种情况下，返回值被忽略，但在第二种情况下则不被忽略。
或者您可以使用event.stopPropagation().
我相信这不是 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将呈现于此位置。