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!");
      }
  });