javascript - Jquery.Validate not working for file upload -
i'm using jquery validation in asp.net mvc project. working textbox . not work file upload. code 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 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 number." data-val-required="the order field 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 working well. file upload not working. have idea?
the problem rule targeting element id instead of name.
fileinput: { required: true } your rule looking element name attribute of fileinput. however, file input element contains name="file".
<input id="fileinput" name="file" type="file" value="" /> to fix it, change rule targets name attribute...
file: { required: true } 
Comments
Post a Comment