Question

需要帮助。

我们正在将遗留应用程序（以3GL语言开发）迁移到ASP.NET MVC4。客户端希望Web中的应用程序具有类似的行为。表单中有超过25个字段，按下回车键，焦点从一个字段移动到另一个字段。遗留应用程序在每个字段上按Enter键时触发验证（调用平面文件并比较值并抛出错误消息）。

是否有可能在web中使用jquery validate实现相同的行为结合使用ajax调用控制器进行验证按Enter键？任何建议/参考模式实现相同？

Answer 1

您可以使用javascript并订阅所有输入字段的onkeypress事件，如果键是enter，则移至下一个字段。就验证而言，您仍然可以使用jquery不显眼的验证，该验证在MVC中开箱即用，并将被触发onblur（当光标离开当前输入字段时）。您所要做的就是使用相应的数据注释（[Required]，...）修饰您的视图模型属性，并将jquery，jquery.validate和jquery.validate.unobtrusive脚本包含在您的脚本中页面（按此顺序）。

我们举个例子：

与往常一样，您从视图模型开始：

public class MyViewModel
{
    [Required]
    public string Foo { get; set; }

    [MinLength(5)]
    public string Bar { get; set; }
}

然后是控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        if (!ModelState.IsValid)
        {
            return View(model);
        }

        // TODO: the input is valid => process it here

        return Content("success");
    }
}

和相应的观点：

@model MyViewModel

@using (Html.BeginForm())
{
    <div>
        @Html.LabelFor(x => x.Foo)
        @Html.EditorFor(x => x.Foo)
        @Html.ValidationMessageFor(x => x.Foo)
    </div>
    <div>
        @Html.LabelFor(x => x.Bar)
        @Html.EditorFor(x => x.Bar)
        @Html.ValidationMessageFor(x => x.Bar)
    </div>
    <button type="submit">OK</button>
}

<script type="text/javascript" src="~/scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="~/scripts/jquery.validate.js"></script>
<script type="text/javascript" src="~/scripts/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript">
    // Set the focus to the first input element initially
    $('form input:first').focus();

    // enable eager client side validation without requiring the form to be submitted
    $(function () {
        var settings = $.data($('form')[0], 'validator').settings;
        settings.onfocusout = function (element) { $(element).valid(); };
    });

    // subscribe to the keypress event of the input fields in order to move
    // the focus to the next field
    $('input, select, textarea').keypress(function (event) {
        if (event.keyCode == 10 || event.keyCode == 13) {
            $(this).closest('div').next('div').find(':first-child').focus();
            event.preventDefault();
        }
    });
</script>

如何通过按Enter键使用jquery从一个字段移动焦点并执行验证到另一个字段？

1 个答案: