EqualTo
The System.ComponentModel.DataAnnotations.CompareAttribute maps to the equalto validation method in jQuery Validation.
Here's the model, note that the Compare attribute decorates the ConfirmEmail property on the model:
using System.ComponentModel.DataAnnotations;
namespace jQuery.Validation.Unobtrusive.Native.Demos.Models
{
public class EqualToModel
{
[Required,
EmailAddress]
public string EMail { get; set; }
[Compare("EMail", ErrorMessage = "Emails do not match.")]
public string ConfirmEmail { get; set; }
}
}
Here's the view (which uses the model):
@model jQuery.Validation.Unobtrusive.Native.Demos.Models.EmailModel
@using (Html.BeginForm())
{
<div class="row">
@Html.LabelFor(x => x.EMail, "An email address must be entered:")
@Html.TextBoxFor(x => x.EMail, true)
</div>
<div class="row">
@Html.LabelFor(x => x.ConfirmEmail, "Please confirm your email address:")
@Html.TextBoxFor(x => x.ConfirmEmail, true)
</div>
<div class="row">
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-info">Reset</button>
</div>
}
Here's the HTML that the view generates:
<form action="/Demo/EqualTo" method="post">
<div class="row">
<label for="EMail">An email address must be entered:</label>
<input data-msg-email="The EMail field is not a valid e-mail address."
data-msg-required="The EMail field is required."
data-rule-email="true"
data-rule-required="true"
id="EMail" name="EMail" type="text" value="an@emailaddress.com" />
</div>
<div class="row">
<label for="ConfirmEmail">Please confirm your email address:</label>
<input data-msg-equalto="Emails do not match."
data-rule-equalto="#EMail"
id="ConfirmEmail" name="ConfirmEmail" type="text" value="" />
</div>
<div class="row">
<button type="submit" class="btn btn-default">Submit</button>
<button type="reset" class="btn btn-info">Reset</button>
</div>
</form>
Here's the JavaScript that initialises the validation:
$("form").validate({
submitHandler: function (form) {
alert("This is a valid form!");
}
});