Number
If a property is a Short, Integer, Long, Byte, Decimal, Single or Double then jQuery Validation Unobtrusive Native applies the number validation method in jQuery Validation. This validation will also be applied for Nullables of the same types. Non-nullable numbers also have the required validation method in jQuery Validation applied (as a non-nullable number in .NET has a default value).
Here's the model, note we have different .NET number types and their associated nullable equivalents:
using System.ComponentModel.DataAnnotations;
namespace jQuery.Validation.Unobtrusive.Native.Demos.Models
{
public class NumberModel
{
public short Short { get; set; }
public int Integer { get; set; }
public long Long { get; set; }
public byte Byte { get; set; }
public decimal Decimal { get; set; }
public float Single { get; set; }
public double Double { get; set; }
public short? NullableShort { get; set; }
public int? NullableInteger { get; set; }
public long? NullableLong { get; set; }
public byte? NullableByte { get; set; }
public decimal? NullableDecimal { get; set; }
public float? NullableSingle { get; set; }
public double? NullableDouble { get; set; }
}
}
Here's the view (which uses the model):
@model jQuery.Validation.Unobtrusive.Native.Demos.Models.NumberModel
@using (Html.BeginForm())
{
<div class="row">
@Html.LabelFor(x => x.Short, "Short - a number must be entered:")
@Html.TextBoxFor(x => x.Short, true)
</div>
<div class="row">
@Html.LabelFor(x => x.NullableShort, "Nullable Short - only numbers can be entered:")
@Html.TextBoxFor(x => x.NullableShort, true)
</div>
<div class="row">
@Html.LabelFor(x => x.Integer, "Integer - a number must be entered:")
@Html.TextBoxFor(x => x.Integer, true)
</div>
<div class="row">
@Html.LabelFor(x => x.NullableInteger, "Nullable Integer - only numbers can be entered:")
@Html.TextBoxFor(x => x.NullableInteger, true)
</div>
<div class="row">
@Html.LabelFor(x => x.Long, "Long - a number must be entered:")
@Html.TextBoxFor(x => x.Long, true)
</div>
<div class="row">
@Html.LabelFor(x => x.NullableLong, "Nullable Long - only numbers can be entered:")
@Html.TextBoxFor(x => x.NullableLong, true)
</div>
<div class="row">
@Html.LabelFor(x => x.Byte, "Byte - a number must be entered:")
@Html.TextBoxFor(x => x.Byte, true)
</div>
<div class="row">
@Html.LabelFor(x => x.NullableByte, "Nullable Byte - only numbers can be entered:")
@Html.TextBoxFor(x => x.NullableByte, true)
</div>
<div class="row">
@Html.LabelFor(x => x.Decimal, "Decimal - a number must be entered:")
@Html.TextBoxFor(x => x.Decimal, true)
</div>
<div class="row">
@Html.LabelFor(x => x.NullableDecimal, "Nullable Decimal - only numbers can be entered:")
@Html.TextBoxFor(x => x.NullableDecimal, true)
</div>
<div class="row">
@Html.LabelFor(x => x.Single, "Single - a number must be entered:")
@Html.TextBoxFor(x => x.Single, true)
</div>
<div class="row">
@Html.LabelFor(x => x.NullableSingle, "Nullable Single - only numbers can be entered:")
@Html.TextBoxFor(x => x.NullableSingle, true)
</div>
<div class="row">
@Html.LabelFor(x => x.Double, "Double - a number must be entered:")
@Html.TextBoxFor(x => x.Double, true)
</div>
<div class="row">
@Html.LabelFor(x => x.NullableDouble, "Nullable Double - only numbers can be entered:")
@Html.TextBoxFor(x => x.NullableDouble, 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="/Home/DemosNumber" method="post">
<div class="row">
<label for="Short">Short - a number must be entered:</label>
<input data-msg-number="The field Short must be a number." data-msg-required="The Short field is required."
data-rule-number="true" data-rule-required="true"
id="Short" name="Short" type="text" value="0" />
</div>
<div class="row">
<label for="NullableShort">Nullable Short - only numbers can be entered:</label>
<input data-msg-number="The field NullableShort must be a number." data-rule-number="true"
id="NullableShort" name="NullableShort" type="text" value="" />
</div>
<div class="row">
<label for="Integer">Integer - a number must be entered:</label>
<input data-msg-number="The field Integer must be a number." data-msg-required="The Integer field is required."
data-rule-number="true" data-rule-required="true"
id="Integer" name="Integer" type="text" value="0" />
</div>
<div class="row">
<label for="NullableInteger">Nullable Integer - only numbers can be entered:</label>
<input data-msg-number="The field NullableInteger must be a number." data-rule-number="true"
id="NullableInteger" name="NullableInteger" type="text" value="" />
</div>
<div class="row">
<label for="Long">Long - a number must be entered:</label>
<input data-msg-number="The field Long must be a number." data-msg-required="The Long field is required."
data-rule-number="true" data-rule-required="true"
id="Long" name="Long" type="text" value="0" />
</div>
<div class="row">
<label for="NullableLong">Nullable Long - only numbers can be entered:</label>
<input data-msg-number="The field NullableLong must be a number." data-rule-number="true"
id="NullableLong" name="NullableLong" type="text" value="" />
</div>
<div class="row">
<label for="Byte">Byte - a number must be entered:</label>
<input data-msg-number="The field Byte must be a number." data-msg-required="The Byte field is required."
data-rule-number="true" data-rule-required="true"
id="Byte" name="Byte" type="text" value="0" />
</div>
<div class="row">
<label for="NullableByte">Nullable Byte - only numbers can be entered:</label>
<input data-msg-number="The field NullableByte must be a number." data-rule-number="true"
id="NullableByte" name="NullableByte" type="text" value="" />
</div>
<div class="row">
<label for="Decimal">Decimal - a number must be entered:</label>
<input data-msg-number="The field Decimal must be a number." data-msg-required="The Decimal field is required."
data-rule-number="true" data-rule-required="true"
id="Decimal" name="Decimal" type="text" value="0" />
</div>
<div class="row">
<label for="NullableDecimal">Nullable Decimal - only numbers can be entered:</label>
<input data-msg-number="The field NullableDecimal must be a number." data-rule-number="true"
id="NullableDecimal" name="NullableDecimal" type="text" value="" />
</div>
<div class="row">
<label for="Single">Single - a number must be entered:</label>
<input data-msg-number="The field Single must be a number." data-msg-required="The Single field is required."
data-rule-number="true" data-rule-required="true"
id="Single" name="Single" type="text" value="0" />
</div>
<div class="row">
<label for="NullableSingle">Nullable Single - only numbers can be entered:</label>
<input data-msg-number="The field NullableSingle must be a number." data-rule-number="true"
id="NullableSingle" name="NullableSingle" type="text" value="" />
</div>
<div class="row">
<label for="Double">Double - a number must be entered:</label>
<input data-msg-number="The field Double must be a number." data-msg-required="The Double field is required."
data-rule-number="true" data-rule-required="true"
id="Double" name="Double" type="text" value="0" />
</div>
<div class="row">
<label for="NullableDouble">Nullable Double - only numbers can be entered:</label>
<input data-msg-number="The field NullableDouble must be a number." data-rule-number="true"
id="NullableDouble" name="NullableDouble" 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!");
}
});
