如何通过向导使用asp.net MVC 3不干扰JavaScript验证？

Question

我正在使用asp.net mvc 3，并希望使用不引人注目的javascript 。 我正在设计一个很长的表格，如果不分解的话，可能会很不方便。

我决定使用jquery表单向导将其分解为一个看上去不应该让人觉得不知所措的向导。 我不奇怪我该如何在向导中使用数据注释和简洁的Java脚本。

现在，所有内容仍处于一种大形式，但看起来只是通过向导分解了。 表单末尾只有一个提交按钮，单击该按钮将序列化表单数据并使用该数据对服务器进行ajax发布。

从我通常第一次看到的使用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 validate，但由于某种原因它无法使用mvc jquery validate方式。

经过更多调查，我发现向导需要将“ 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. 采取完整的形式，并使用class step将其切成“ div”，其中每个div都是一个步骤（我认为您已经完成了这一部分）。

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

   输入类别=“ navigation_button” id =“返回” type =“重置” value =“返回”

   输入class =“ navigation_button” id =“下一步” type =“提交” value =“下一步”

3. 初始化你的formwizard

    $(document).ready(function () { $("form").formwizard({ formPluginEnabled: true, validationEnabled: true, focusFirstInput : 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;
}