Range
The System.ComponentModel.DataAnnotations.RangeAttribute maps to the range validation method in jQuery Validation.
Here's the model, note that the Range
attribute decorates each property of the model enforcing a range of between 10 and 20 (we've used the integer and double convenience overloads for Integer and Double respectively, for other types we're using the overload that takes the type as a parameter):
using System.ComponentModel.DataAnnotations; namespace jQuery.Validation.Unobtrusive.Native.Demos.Models { public class RangeModel { [Range(typeof(short), "10", "20")] public short Short { get; set; } [Range(10, 20)] public int Integer { get; set; } [Range(typeof(long), "10", "20")] public long Long { get; set; } [Range(typeof(byte), "10", "20")] public byte Byte { get; set; } [Range(typeof(decimal), "10", "20")] public decimal Decimal { get; set; } [Range(typeof(float), "10", "20")] public float Single { get; set; } [Range(10D, 20D)] public double Double { get; set; } } }
Here's the view (which uses the model):
@model jQuery.Validation.Unobtrusive.Native.Demos.Models.RangeModel @using (Html.BeginForm()) { <div class="row"> @Html.LabelFor(x => x.Short, "Short - a number between 10 and 20 must be entered:") @Html.TextBoxFor(x => x.Short, true) </div> <div class="row"> @Html.LabelFor(x => x.Integer, "Integer - a number between 10 and 20 must be entered:") @Html.TextBoxFor(x => x.Integer, true) </div> <div class="row"> @Html.LabelFor(x => x.Long, "Long - a number between 10 and 20 must be entered:") @Html.TextBoxFor(x => x.Long, true) </div> <div class="row"> @Html.LabelFor(x => x.Byte, "Byte - a number between 10 and 20 must be entered:") @Html.TextBoxFor(x => x.Byte, true) </div> <div class="row"> @Html.LabelFor(x => x.Decimal, "Decimal - a number between 10 and 20 must be entered:") @Html.TextBoxFor(x => x.Decimal, true) </div> <div class="row"> @Html.LabelFor(x => x.Single, "Single - a number between 10 and 20 must be entered:") @Html.TextBoxFor(x => x.Single, true) </div> <div class="row"> @Html.LabelFor(x => x.Double, "Double - a number between 10 and 20 must be entered:") @Html.TextBoxFor(x => x.Double, 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/Range" method="post"> <div class="row"> <label for="Short">Short - a number between 10 and 20 must be entered:</label> <input data-msg-number="The field Short must be a number." data-msg-range="The field Short must be between 10 and 20." data-msg-required="The Short field is required." data-rule-number="true" data-rule-range="[10,20]" data-rule-required="true" id="Short" name="Short" type="text" value="0" /> </div> <div class="row"> <label for="Integer">Integer - a number between 10 and 20 must be entered:</label> <input data-msg-number="The field Integer must be a number." data-msg-range="The field Integer must be between 10 and 20." data-msg-required="The Integer field is required." data-rule-number="true" data-rule-range="[10,20]" data-rule-required="true" id="Integer" name="Integer" type="text" value="0" /> </div> <div class="row"> <label for="Long">Long - a number between 10 and 20 must be entered:</label> <input data-msg-number="The field Long must be a number." data-msg-range="The field Long must be between 10 and 20." data-msg-required="The Long field is required." data-rule-number="true" data-rule-range="[10,20]" data-rule-required="true" id="Long" name="Long" type="text" value="0" /> </div> <div class="row"> <label for="Byte">Byte - a number between 10 and 20 must be entered:</label> <input data-msg-number="The field Byte must be a number." data-msg-range="The field Byte must be between 10 and 20." data-msg-required="The Byte field is required." data-rule-number="true" data-rule-range="[10,20]" data-rule-required="true" id="Byte" name="Byte" type="text" value="0" /> </div> <div class="row"> <label for="Decimal">Decimal - a number between 10 and 20 must be entered:</label> <input data-msg-number="The field Decimal must be a number." data-msg-range="The field Decimal must be between 10 and 20." data-msg-required="The Decimal field is required." data-rule-number="true" data-rule-range="[10,20]" data-rule-required="true" id="Decimal" name="Decimal" type="text" value="0" /> </div> <div class="row"> <label for="Single">Single - a number between 10 and 20 must be entered:</label> <input data-msg-number="The field Single must be a number." data-msg-range="The field Single must be between 10 and 20." data-msg-required="The Single field is required." data-rule-number="true" data-rule-range="[10,20]" data-rule-required="true" id="Single" name="Single" type="text" value="0" /> </div> <div class="row"> <label for="Double">Double - a number between 10 and 20 must be entered:</label> <input data-msg-number="The field Double must be a number." data-msg-range="The field Double must be between 10 and 20." data-msg-required="The Double field is required." data-rule-number="true" data-rule-range="[10,20]" data-rule-required="true" id="Double" name="Double" type="text" value="0" /> </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!"); } });