如何通过向导使用 asp.net mvc 3 不引人注目的 javascript 验证？

Question

我正在使用 asp.net mvc 3 并希望使用 不引人注目的 JavaScript 。我正在设计一个相当长的表格，如果不分解的话可能会让人不知所措。

我决定使用 jquery 表单向导 将其分解为一个不应该看起来那么势不可挡的向导。我不知道如何使用数据注释和不显眼的 java 脚本与向导。

现在一切仍然是一个大的形式，但看起来只是通过向导被打破了。表单末尾只有一个提交按钮，单击该按钮将序列化表单数据并使用该数据将 ajax post 发送到服务器。

从我第一次使用 mvc 验证时看到的情况来看，用户需要在任何客户端验证触发之前单击提交按钮。我想知道一旦他们离开该字段是否可以执行此操作，因为一旦用户点击提交并且没有任何反应，就会让用户感到困惑，然后他们必须再次通过整个向导来查找验证错误。

当他们犯错误时立即通知他们会很好。

我知道 jquery 向导使用具有验证功能的 jquery 表单插件，但如果可能的话，我宁愿尝试坚持使用一种方法来保持代码一致。

编辑

这就是我在提交按钮上的内容

$('#frm').live('submit', function (event) {
    event.preventDefault();

    var $thisFrm = $(this);

    ValidatorParse($thisFrm);//jQuery.validator.unobtrusive.parse(selector);
    var clientCheck = $($thisFrm).validate().form();

    if (clientCheck) {
       // ajax post(server side validation will happen.If it does not pass serverside I send it back usually as json).
    }
});

所以我发现了一些问题。首先，验证只会在提交时真正触发。如果它被触发并且验证错误出现在第二个向导步骤上，用户将看不到它（除非某些人可以找到找到第一个错误验证错误并将其切换到该步骤的方法）。

我看到的第二个问题是他们必须等到最后才能查看是否存在验证错误。我宁愿尽快让他们知道。

编辑

向导似乎使用了 jquery 验证，但由于某种原因，它无法使用 mvc jquery 验证方式。

经过更多调查，我发现向导需要将“required”视为一个类来触发，

// will trigger validation
<input type="text" value="" name="AnnualFee" id="AnnualFee"
    data-val-required="Annual Fee Required" 
    data-val="true" 
    class="required ui-wizard-content ui-helper-reset ui-state-default error">

// will not trigger validation
    <input type="text" value="" name="AnnualFee" id="AnnualFee" 
    data-val-required="Annual Fee Required" 
    data-val="true" 
    class="ui-wizard-content ui-helper-reset ui-state-default">

我在 jquery 验证文档中没有看到它们曾经使用该类来验证表单。这是人编出来的吗？

Answer 1

使用 jquery 表单向导 时，您的提交按钮上不需要任何额外的 javascript 代码（当然初始化除外）。

Microsoft MVC3 的不显眼部分只是做了一项无聊的工作，将 html 输入上标记的所有“data-*”属性（例如 data-val-required="blah blah blah"）转换为良好的- jquery 验证的已知规则。这是在我们考虑验证表单之前完成的！

因此，模型上的RequiredValidationAttribute 和朋友（您的自定义验证等）足以开始。

试试这个（如果你已经没有）：

1. 采取你的完整形式，并用类 step 将其切片在“div”上，其中每个 div 都是一个步骤（我认为这部分你已经做了）。

2. 您的提交和后退按钮必须是：

   输入类=“navigation_button”id=“返回”类型=“重置”值=“返回”

   input class="navigation_button" id="next" type="submit" value="Next"

3. 初始化表单向导

   $(文档).ready(function () {
       $("表单").formwizard({ 
           formPluginEnabled：true，
           验证已启用：真，
           焦点第一输入：true
       });
   });
   

表单向导将负责调用向导的每个步骤的验证。

在写这篇文章之前，我给自己制作了一个示例表单来证明它是有效的。

希望它有帮助，或者如果我弄错了你的问题，抱歉。

Answer 2

我和我的团队经常创建向导，并拥有独立的解决方案，不依赖于服务器端的特定技术方法。一些“向导”是结帐流程，其中您有一个页面，其中包含许多结帐步骤。我已经通过我的公司完成了超过 100K 的高流量网站开发工作。

到目前为止，我们使用 c# MVC、c# razor 矩阵样式、node.js、php 和 python。我们采用通用方法，并且可以在所有技术中重复使用它。我们的方法类似于 MVC，它非常严格地分离 HTML、CSS 和 JavaScript。

它是这样的：

1. 我们创建一个页面，仅包含标记以及 CSS 和脚本的链接。我们绝不会在兼容 HTML5 和 HTML5 表单的表单元素中放置数据属性配置以外的内联样式或内联脚本。即使不支持，我们也使用符合 HTLM 5 标准的 JavaScript 进行表单验证。我们有自己的库，但您可以使用 jQuery 工具或类似工具。
2. 您有一个 main.css 文件和一个 main.js 文件，它们将运行整体可重用样式和逻辑。将它们视为管理整个流程的作曲家。
3. 对于向导中的每个步骤，创建特定于每个步骤的单独的 css 和 javascript。
4. 将您的步骤命名为 css 中的名称空间，使其非常具体。
5. 使用 jQuery 运行验证并命名选择器，类似于使用 CSS 方法，以便将事件专门附加到它们应驻留的位置。

因此，您最终会得到适用于任何技术的非常清晰的关注点分离。在您的情况下，您可以更进一步，在 MVC 中为每个步骤创建部分视图，并以这种方式对它们进行划分，因为它们可以为各自的步骤加载自己的 CSS 和 JavaScript。

在我的个人资料中，您可以在结账时看到使用此方法的网站。

我实际上并不认为这是一个完整的答案，需要更多的反馈来充实它。

Answer 3

我这样用的

function ValidateStep(){
    var validator = $("form").validate(); // obtain validator
    var anyError = false;
    if (!validator.element(this)) { // validate every input element inside this step
       anyError = true;
    }
    if(anyError) return false;
    return true;
}