3

I am using asp.net mvc 3 and want to make use of unobtrusive javascript . I am desiging a form that is quite long and probably would be very overwhelming if not broken up.

I decided to use jquery form wizard to break it into a wizard that should not look so overwhelming. I am not wondering how do I use the data annotations and unobtrusive java-script with wizard.

Right now everything is still in one big form but just looks broken up through the wizard. There is only one submit button at the end of the form that when clicked will serialize the form data and do an ajax post to the server with that data.

From what I seen usually for the first time when using the mvc validation the user needs to click the submit button before any of the client side validation gets trigger. I am wondering if it is possible to do it once they leave the field as it going to confuse the user once they hit submit and nothing happens and then they have to go through the entire wizard again to find the validation errors.

It would be nice to inform them right away when they make a mistake.

I know that jquery wizard using the jquery form plugin that has validation but I rather try to stick with one method if possible to keep the code consistent.

Edit

This is what I have on the submit button

$('#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).
    }
});

So I see a couple problems with this. First the validation only will really get triggered on submit. If it gets triggered and the validation error is on the second wizard step the user won't see it(unless some how can figure out way to find the first wrong validation error and switch them to that step).

The second problem I see is that they have to wait till the end to see if they have validation errors. I rather let them know asap.

Edit

It seems the wizard uses jquery validate but for some reason it is not working with mvc jquery validate way.

With more investigation I found that the wizard needs to see "required" as a class to trigger

// 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">

I don't see in the documentation for jquery validate them ever using the class to validate the form. Is this something the person made up?

4

3 回答 3

1

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

Microsoft MVC3不显眼的部分只是将所有标记在 html 输入（例如 data-val-required="blah blah blah"）上的“data-*”属性转换为众所周知的 jquery-validation规则。这是在我们考虑验证表单之前完成的！

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

试试这个（如果你还没有）：

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

  2. 您的提交和返回按钮必须是：

    输入类="navigation_button" id="back" type="reset" value="Back"

    输入类="navigation_button" id="next" type="submit" value="Next"

  3. 初始化表单向导

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

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

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

希望对您有所帮助，或者如果我把您的问题弄错了，请见谅。

于 2011-12-27T13:07:47.987 回答
0

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

到目前为止，我们使用 c# MVC、c# razor matrix-style、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。

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

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

于 2011-12-25T01:46:46.323 回答
0

我是这样用的

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;
}
于 2011-12-27T11:28:07.407 回答