Question

我正在尝试实现一个自定义按钮面板，该面板将显示在mvc4应用程序的每个创建视图中。单击保存时，它应转到一般javascript函数，该函数验证视图/表单并在警报中以及该字段旁边的视图中返回错误。到目前为止，我所能得到的只有：

编辑

<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - COMIS</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<link href="~/Content/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" rel="stylesheet" 
 type="text/css" />

<script src="~/Scripts/jquery-1.11.1.js" type="text/javascript"></script>    
<script src="~/Scripts/jquery-migrate-1.2.1.js" type="text/javascript"></script>
<script src="~/Scripts/datepicker.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>

<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css") 
@Styles.Render("~/Content/themes/base/css") 
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval") 
@Scripts.Render("~/Scripts/buttons.js") 
@Scripts.Render("~/Scripts/navigation.js")
</head>

   function global() {
   function () {
    $('a.button.positive').click(function (e) { e.preventDefault();

    if (!form.validate()) {
        alert('validation error');
        return false;                
        }
        else {
            form.submit();
            alert('submitted');
             return true;
        }

    });
  }
  }

这是一个示例视图：

@model ....
@{ ViewBag.Title = "Create"; } 
@using(Html.BeginForm()) 
{ @Html.ValidationSummary(true)

 <form id="form" action="Create" onsubmit="return global()">
 <fieldset class="innerform">
 <div>
    <h2>
        Add a New Rate</h2>
    <br />
</div>
<div class="editor-label">
    Period Start*
</div>
<div class="editor-field">
    @Html.TextBoxFor(model => model.Period_Start, "{0:yyyy MMM dd}", new { @id= "from" })
    @Html.ValidationMessageFor(model => model.Period_Start)
</div>
<br />
<br />
<div class="editor-label">
    Period End*
</div>
<div class="editor-field">
       @Html.TextBoxFor(model => model.Period_End, "{0:yyyy MMM dd}", new { @id = "to" })
    @Html.ValidationMessageFor(model => model.Period_End)
</div>
<br />
<br />
<div class="editor-label">
    Rate*
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Tug_Rate) @Html.ValidationMessageFor(model => model.Tug_Rate)
</div>
<br />
<br />
<div class="buttons">
    <a href="#" class="button positive">
        <img width="16" height="16" src="../../Images/tick.png" alt="">
        Save </a>

       <a href="@Url.Content("~/TugRates/Index")" class="button negative">
        <img width="16" height="16" src="../../Images/cross.png" alt="">
        Cancel </a>
</div>

</fieldset>
</form>
 }
 @section Scripts {
 @Scripts.Render("~/bundles/jqueryval")
 }



 <script type="text/javascript">
 $(function () {
    $("#from").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
       dateFormat: "yy-mm-dd",
        onClose: function (selectedDate) {
            $("#to").datepicker("option", "minDate", selectedDate);
        }
    });
    $("#to").datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        dateFormat: "yy-mm-dd",
        onClose: function (selectedDate) {
            $("#from").datepicker("option", "maxDate", selectedDate);
        }
    });
});

我在各个控制器的保存上设置了一个断点，但它甚至没有击中它。我不确定我在javascript中出错的地方。任何帮助将不胜感激。

Answer 1

在加载页面后，您的事件需要绑定。

$(document).ready(function () {
    $('a.button.positive').click(function (e) { e.preventDefault();

        if (!form.validate()) {
            alert('validation error');
            return false;                
        }
        else {
            form.submit();
            alert('submitted');
            return true;
        }

    });

});

如果希望绑定在某些函数中是全局的。在document.ready中调用该函数：

function BindSave() {
    $('a.button.positive').click(function (e) { e.preventDefault();

        if (!form.validate()) {
            alert('validation error');
            return false;                
        }
        else {
            form.submit();
            alert('submitted');
            return true;
        }

    });

}

$(document).ready(function () {
    BindSave();
});

修改：

工作小提琴：

http://jsfiddle.net/9oboj8md/1/

修改：

http://jsfiddle.net/9oboj8md/2/

表单的选择器应该是这样的：

$("#form")

mvc4中所有视图的常规javascript验证

1 个答案: