asp .net MVC 2.0 Validation

Question

I'm trying to do some validation in asp .net MVC 2.0 for my application. I want to have some nice client side validation. Validation should be done most time on model side with DataAnnotations with custom attributes( like CompareTo, StringLenght, MinPasswordLenght (from Membership.MinimumumpassworkdLenght value). For that purpose I tried to use xval with jquery.validation. Some specific thing is that most of forms will be working with ajax and most problems are when I want to validate form with ajax.

Here is link for sample project http://www.sendspace.com/file/m9gl54 .

I got two forms as controls ValidFormControl1.ascx, ValidFormControl2.ascx

<% using (Ajax.BeginForm("CreateValidForm", "Test", new AjaxOptions { HttpMethod = "Post" }))    {%> <div id="validationSummary1">
    <%= Html.ValidationSummary(true)%> </div> <fieldset>
    <legend>Fields</legend>
    <div class="editor-label">
        <%= Html.LabelFor(model => model.Name)%>
    </div>
    <div class="editor-field">
        <%= Html.TextBoxFor(model => model.Name)%>
        <%= Html.ValidationMessageFor(model => model.Name)%>
    </div>
    <div class="editor-label">
        <%= Html.LabelFor(model => model.Email)%>
    </div>
    <div class="editor-field">
        <%= Html.TextBoxFor(model => model.Email)%>
        <%= Html.ValidationMessageFor(model => model.Email)%>
    </div>
    <div class="editor-label">
        <%= Html.LabelFor(model => model.Password)%>
    </div>
    <div class="editor-field">
        <%= Html.TextBoxFor(model => model.Password)%>
        <%= Html.ValidationMessageFor(model => model.Password)%>
    </div>
    <div class="editor-label">
        <%= Html.LabelFor(model => model.ConfirmPassword)%>
    </div>
    <div class="editor-field">
        <%= Html.TextBoxFor(model => model.ConfirmPassword)%>
        <%= Html.ValidationMessageFor(model => model.ConfirmPassword)%>
    </div>
    <p>
        <input type="submit" value="Create" />
    </p> </fieldset> <% } %> <%= Html.ClientSideValidation<ValidModel>()
    .UseValidationSummary("validationSummary1", "Please fix the following problems:") %>

Both look same the difference is only validation summaryID (validationSummary1, validationSummary2). Both controls are rendered on one page :

Form2
    <%Html.RenderPartial("~/Views/Test/ValidFormControl2.ascx", null); %>
Form1

<%Html.RenderPartial("~/Views/Test/ValidFormControl.ascx", null); %>

Validation property

First problem, when we have two controls with same type to validate it don't work becosue html elements are rendered by field name ( so we have two element with same name “Password” ). Only first form will be validated by client side. The worst thing is that even if we have different types and their fields name is same validation won't work too ( this thing is what I need to repair it will be stupid to name some unique properites for validation ).

Is there any solution for this ?

Custom attributes validation

Next thing custom attributes validation ( All those error are when I use Ajax for on normal form validation is working without problem. ):

CompareTo - Simple compare to that is done in mvc template for account model ( class attribute saying with two property will be compared ) , and it wasn't show on page. To do it I created own CachingRulesProvider with compareRule and my Attribute. Maybe there is more easy way to do it?

StringLenght with minimum and maximum value, I won't describe how I done it but is there any easy whey to do it?

Validation summary

When I have two two control on page all summary validation information goes to first control validation summary element, even xval generated script say that elementID are different for summary. Any one know how to repair it?

Validation Information

Is there any option to turn on messages on place where is Html.ValidationMessageFor(model => model.ConfirmPassword). Becsoue for me it isn't show up. I would like to have summary and near field information too not only red border. Any one know how to do it?

Ajax submit

Anyone know how to do easy without massive code in javascript to do submit via javascript. This will be used to change input submit to href element (a). Both look same the difference is only validation summaryID

Answer 1

First off, I don't know why you want to have two controls, having two identical fields, one form. Each form should have its own model and use a model as a validator.

namespace Sample.Models { [metatype(typeof(PersonaValidation))] public partial class Person { } public class PersonValidation { [Required(ErrorMessage = "First name Required")] [StringLength(20, ErrorMessage = "First name must be 20 or less characters in length")] [DisplayName("First Name")] public string Firstname { get; set; }

    [Required(ErrorMessage = "Last name Required")]
    [StringLength(20, ErrorMessage = "Last name must be 20 or less characters in length")]
    [DisplayName("Last Name")]
    public string Lastname { get; set; }

} }

In your aspx, add the following script files before form tag:

<h2>Validation Sample</h2>

<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>   
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>   
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>   
<% Html.EnableClientValidation(); %>

<% using (Html.BeginForm()) {%>
    <%= Html.ValidationSummary(true) %>
      <fieldset>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.Firstname) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.Firstname) %>
            <%= Html.ValidationMessageFor(model => model.Firstname) %>
        </div>

        <div class="editor-label">
            <%= Html.LabelFor(model => model.Lastname) %>
        </div>
        <div class="editor-field">
            <%= Html.TextBoxFor(model => model.Lastname) %>
            <%= Html.ValidationMessageFor(model => model.Lastname) %>
        </div>

        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>

<% } %>

This will work every time. Error message will be displayed next to the invalid field.

Answer 2

Concerning the ajax submit, you could just put a button on your form an then perform a click on it through jQuery. This would lead also lead to your form being posted.

You could also just make an ajax call to the controller action (on link click) and in here you post the necessary data from your form.