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

Question

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

我决定使用jquery form wizard把它分解成一个不应该看起来那么势不可挡的向导。我不知道如何使用数据注释和不显眼的 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-validation规则。这是在我们考虑验证表单之前完成的!

因此，模型上的RequiredValidationAttribute 和 friend (您的自定义验证等)足以开始。

尝试一下(如果您还没有这样做):

1. 采用完整形式，并使用类 step 将其切片到“div”上，其中每个 div 都是一个步骤(我认为这部分您已经完成了)。

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

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

   输入类=“navigation_button”id=“下一步”类型=“提交”值=“下一步”

3. 初始化表单向导

   $(document).ready(function () {
       $("form").formwizard({ 
           formPluginEnabled: true,
           validationEnabled: true,
           focusFirstInput : true
       });
   });
   

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

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

希望它能有所帮助，或者如果我弄错了您的问题，我们深表歉意。