将自定义 JavaScript/jQuery 效果添加到 MVC 3 表单验证中

Adding custom JavaScript/jQuery effects to MVC 3 form validation

本文关键字：MVC 表单 验证 添加 JavaScript 自定义 jQuery      更新时间：2023-09-26

我正在使用asp.net的MVC3构建一个大型网站。在登录页面上，我正在使用内置函数进行不显眼的javascript验证。一切都很好，但我想为验证消息的显示方式添加一些效果。（我想要一个红色框在错误下方滑动）。

我该怎么做？我一直在试图弄清楚jquery.validate.unobtrusive.js是如何工作的，但这对我来说都是黑魔法，我似乎找不到实际将消息添加到屏幕上的代码。

我将不胜感激任何帮助！我在这方面很绿色。

谢谢

涅什卡

ValidationSummary是将错误添加到页面以在出现服务器端错误后可见的原因。 ValidationFor元素提供客户端错误。

两者都是 HTML 帮助程序。你将需要实现自己的形式，将错误返回到视图或重写这些错误并显示自定义 UI 元素。

看看jQueryUI的初学者。

事实是，我们每个人都很可能会给你一个完全不同的场景来实现。但其中的关键元素将是jQuery/Ajax/JSON。

例如，对我来说，我在发布创建或更新的每个视图中都包含一个 javascript 引用

<script src="@Url.Content("~/Scripts/AjaxFormSubmission.js")" type="text/javascript"></script>

该脚本如下所示：

/// <reference path="jquery-1.7.2.js" />
$("document").ready(function () {
    $('form').submit(function () {
        if ($(this).valid()) {
            $.ajax({
                url: this.action,
                dataType: "json",
                cache: false,
                type: 'POST',
                data: $(this).serialize(),
                beforeSubmit: showProgressStarted(),
                success: function (result) {
                    showSuccessError(result);                             
                }
            });
        }
        return false;
    });
});

我弹出一点"请稍候，您的请求正在处理中......"消息，当我提交表单时，我在完成时显示一个隐藏的div，其中包含我的 JSON 成功或错误消息。

JQueryUI对话框会让你在这种目标上走得很远。

下面是上述脚本发布到的我的一个操作示例

public JsonResult UpdateRequestStatus(RequestViewModel model) {
    try {
        AttemptUpdateRequestStatus(model);
        return Json(new { Success = true, ResultMessage = "Successfully saved" }, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex) {
        ModelState.AddModelError("", ModelStateErrorUtility.WrapResultMessageForList(ex.Message));
    }
    // this custom function evaluates my ModelState and strips out all the error messages so that I can send them all back as part of my JSON response
    return Json(new { Success = false, ResultMessage = ModelStateErrorUtility.GetModelStateErrors(ModelState) }, JsonRequestBehavior.AllowGet);
}

这是我的javascript/jQuery代码，显示了我的自定义错误

function showSuccessError(result) {
    $('#resultSpan').html('');
    var headerText;
    if (result.Success) {
        headerText = "Action was successful!";
        $('#resultSpan').append($("<ul id='successMsg' style='list-style: none;' />").append(result.ResultMessage));
    }
    else {
        headerText = "Ooops! There is an Error";
        $('#resultSpan').append($("<ul id='errorMsg' style='list-style: none;' />").append(result.ResultMessage)).addClass("AjaxErrorText").removeClass("AjaxSuccessText");
    }
    showProgressComplete(headerText);
}

这将更改"请稍候..."的文本到实际成功或错误消息

function showProgressComplete(headerText) {
    $('#ajaxResultPopUpHeaderText').html(headerText);
}

就像我说的，这只是一个人的例子。这里的每个人都很可能会以不同的方式实现这一点。这真的是偏好。

相关文章：