I'm using jquery validation in my asp.net mvc project. It is working well with textbox . But it is not work with file upload. My code is shown below:
@model ffyazilim.Management.Model.Credential.CreateModel
@{
ViewBag.Title = "Create";
Layout = "~/Areas/Management/Views/_ManagementLayout.cshtml";
}
@section Scripts
{
<script type="text/javascript">
$(function () {
$('#form').validate({
rules: {
Title: {
required: true,
maxlength: 45,
minlength: 5
},
Description: {
required: true,
maxlength: 250,
minlength: 5
},
Order: {
required: true,
maxlength: 10,
minlength: 1
},
fileInput: {
required: true
}
},
messages: {
fileInput: "Lütfen dosya seçiniz",
}
});
});
</script>
<script>
$(document).ready(function () {
$('#form').ajaxForm({
success: function (response, textStatus, xhr, form) {
$("#alert").addClass('alert alert-success');
$("#alert").html('Kayıt başarılı');
$("#alert").css("display", "block");
},
error: function (xhr, textStatus, errorThrown) {
$("#alert").addClass('alert alert-danger');
$("#alert").html('Kayıt başarısız');
$("#alert").css("display", "block");
},
});
});
</script>
}
@Html.MvcSiteMap().SiteMapPath("BootstrapSiteMapPathHelperModel")
@using (Html.BeginForm(Html.BeginForm("Create", "Credential", FormMethod.Post, new { enctype = "multipart/form-data" ,id="form"})))
{
<table>
<tr>
<div id="alert" style="margin-top: 20px; display:none;"></div>
</tr>
<tr>
<td>Başlık:</td>
<td>@Html.TextBoxFor(m => m.Title)</td>
</tr>
<tr>
<td>Açıklama:</td>
<td>@Html.TextBoxFor(m => m.Description)</td>
</tr>
<tr>
<td>Sıra:</td>
<td>@Html.TextBoxFor(m => m.Order)</td>
</tr>
<tr>
<td>Resim:</td>
<td>@Html.TextBoxFor(m => m.File, new { type = "file" ,id="fileInput"})</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" class="btn" value="Kaydet" /></td>
</tr>
</table>
}
Rendered html markup is shown below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>_Layout</title>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-ui.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/grid.locale-tr.js"></script>
<script src="/Scripts/jquery.jqGrid.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/messages_tr.js"></script>
<link href="/Content/Css/jquery-ui.css" rel="stylesheet"/>
<link href="/Content/Css/bootstrap-responsive.css" rel="stylesheet"/>
<link href="/Content/Css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/Css/opa-icons.css" rel="stylesheet"/>
<link href="/Content/Css/charisma-app.css" rel="stylesheet"/>
<link href="/Content/Css/ui.jqgrid.css" rel="stylesheet"/>
<script src="http://malsup.github.com/jquery.form.js"></script>
<style type="text/css">
body {
padding-top: 0px;
padding-bottom: 40px;
background-color: white;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<script type="text/javascript">
$(function () {
$('#form').validate({
rules: {
Title: {
required: true,
maxlength: 45,
minlength: 5
},
Description: {
required: true,
maxlength: 250,
minlength: 5
},
Order: {
required: true,
maxlength: 10,
minlength: 1
},
fileInput: {
required: true
}
},
messages: {
fileInput: "Lütfen dosya seçiniz",
}
});
});
</script>
<script>
$(document).ready(function () {
$('#form').ajaxForm({
success: function (response, textStatus, xhr, form) {
$("#alert").addClass('alert alert-success');
$("#alert").html('Kayıt başarılı');
$("#alert").css("display", "block");
},
error: function (xhr, textStatus, errorThrown) {
$("#alert").addClass('alert alert-danger');
$("#alert").html('Kayıt başarısız');
$("#alert").css("display", "block");
},
});
});
</script>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand" href="index">
<img src="img/logo20.png" alt="">
<span>ffyazılım</span>
</a>
<div class="btn-group pull-right">
<a href="#" data-toggle="dropdown" class="btn dropdown-toggle">
<i class="icon-user"></i><span class="hidden-phone">admin</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Profil</a></li>
<li class="divider"></li>
<li><a href="/Management/Home/LogOut">Çıkış</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2 main-menu-span">
<div class="well nav-collapse sidebar-nav">
<ul class="nav nav-tabs nav-stacked main-menu" style="margin-bottom: 5px;">
<li class="nav-header hidden-tablet">Ana Menü</li>
<li style="margin-left: 5px;">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Kullanıcılar <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="/Management/User/Create">Yeni</a></li>
<li><a href="/Management/User">Kullanıcı Listesi</a> </li>
</ul>
</div>
</li>
</ul>
<ul class="nav nav-tabs nav-stacked main-menu">
<li style="margin-left: 5px;">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown- toggle" data-toggle="dropdown">
Referanslar <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="/Management/Credential/Create">Yeni</a> </li>
<li><a href="/Management/Credential">Referans Listesi</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="span10">
<a href="/Management/Home" title="Panel">Panel</a>
>
<a href="/Management/Credential" title="Referanslar">Referanslar</a>
>
Referans Oluştur
<form action="/Management/Credential/Create" enctype="multipart/form-data" id="form" method="post"><form action="/Management/Credential/Create" method="post"> <table>
<tr>
<div id="alert" style="margin-top: 20px; display:none;"></div>
</tr>
<tr>
<td>Başlık:</td>
<td><input id="Title" name="Title" type="text" value="" /></td>
</tr>
<tr>
<td>Açıklama:</td>
<td><input id="Description" name="Description" type="text" value="" /></td>
</tr>
<tr>
<td>Sıra:</td>
<td><input data-val="true" data-val-number="The field Order must be a number." data-val-required="The Order field is required." id="Order" name="Order" type="text" value="" /></td>
</tr>
<tr>
<td>Resim:</td>
<td><input id="fileInput" name="File" type="file" value="" /></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" class="btn" value="Kaydet" /></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
Other validation is working well. Only file upload not working. Have you any idea?