个人中心
gpt4 book ai didi

javascript - Jquery.Validate 不适用于文件上传

转载 作者：行者123 更新时间：2023-11-28 20:22:02 25 4
gpt4 key购买 nike

我在我的 asp.net mvc 项目中使用 jquery 验证。它与 textbox 配合得很好。但它不适用于文件上传。我的代码如下所示:

@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>
}

渲染的 html 标记如下所示:

<!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">&#199;ı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>


    &gt;

    <a href="/Management/Credential" title="Referanslar">Referanslar</a>


    &gt;
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>

其他验证运行良好。仅文件上传不起作用。你有什么想法吗？

最佳答案

问题在于您的规则针对元素 id 而不是 name。 

fileInput: {
    required: true
}

您的规则正在查找 name 属性为 fileInput 的元素。但是，文件输入元素包含 name="File"。 

<input id="fileInput" name="File" type="file" value="" />

要修复此问题，只需更改规则，使其针对 name 属性...

File: {
    required: true
}

关于javascript - Jquery.Validate 不适用于文件上传，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18109266/

25 4 0
文章推荐： javascript - 让 chrome、IE 8 和 Firefox 提交相同表单的奇怪方法
文章推荐： javascript - 选择具有特定文本的按钮仅在单击事件时激活
文章推荐： javascript - jQuery .html() 匿名函数返回oldHtml
文章推荐： ios - MBProgressHUD - 2 个连续的消息重叠
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com