MaxLength and MinLength

The System.ComponentModel.DataAnnotations.StringLengthAttribute maps to the maxlength validation method in jQuery Validation (and depending on usage the minlength validation method too).

The System.ComponentModel.DataAnnotations.MaxLengthAttribute maps to the maxlength validation method in jQuery Validation.

The System.ComponentModel.DataAnnotations.MinLengthAttribute maps to the minlength validation method in jQuery Validation.

Here's the model, note that the StringLength attribute decorates the first two properties on the model, the next is decorated with the MinLength attribute and the final property is decorated with the MaxLength attribute:

    using System.ComponentModel.DataAnnotations;

    namespace jQuery.Validation.Unobtrusive.Native.Demos.Models
    {
        public class MaxLengthMinLengthModel
        {
            [StringLength(7)]
            public string StringLengthMaxOnly { get; set; }

            [StringLength(10, MinimumLength = 5)]
            public string StringLengthMaxAndMinLength { get; set; }

            [MinLength(6)]
            public string MinLength { get; set; }

            [MaxLength(9)]
            public string MaxLength { get; set; }
        }
    }
        

Here's the view (which uses the model):

    @model jQuery.Validation.Unobtrusive.Native.Demos.Models.MaxLengthMinLengthModel
    @using (Html.BeginForm())
    {
        <div class="row">
            @Html.LabelFor(x => x.StringLengthMaxOnly, "A maximum of 7 characters can be entered:")
            @Html.TextBoxFor(x => x.StringLengthMaxOnly, true)
        </div>

        <div class="row">
            @Html.LabelFor(x => x.StringLengthMaxAndMinLength, "A maximum of 10 characters can be entered and a minimum of 5:")
            @Html.TextBoxFor(x => x.StringLengthMaxAndMinLength, true)
        </div>

        <div class="row">
            @Html.LabelFor(x => x.MaxLength, "A maximum of 9 characters can be entered:")
            @Html.TextBoxFor(x => x.MaxLength, true)
        </div>

        <div class="row">
            @Html.LabelFor(x => x.MinLength, "A minimum of 6 characters can be entered:")
            @Html.TextBoxFor(x => x.MinLength, 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/MaxLengthMinLength" method="post">
        <div class="row">
            <label for="StringLengthMaxOnly">A maximum of 7 characters can be entered:</label>
            <input data-msg-maxlength="The field StringLengthMaxOnly must be a string with a maximum length of 7." data-rule-maxlength="7" 
                id="StringLengthMaxOnly" name="StringLengthMaxOnly" type="text" value="12345678" />
        </div>
        <div class="row">
            <label for="StringLengthMaxAndMinLength">A maximum of 10 characters can be entered and a minimum of 5:</label>
            <input data-msg-maxlength="The field StringLengthMaxAndMinLength must be a string with a minimum length of 5 and a maximum length of 10." 
                data-msg-minlength="The field StringLengthMaxAndMinLength must be a string with a minimum length of 5 and a maximum length of 10." 
                data-rule-maxlength="10" data-rule-minlength="5" 
                id="StringLengthMaxAndMinLength" name="StringLengthMaxAndMinLength" type="text" value="123" />
        </div>
                    <div class="row">
            <label for="MaxLength">A maximum of 7 characters can be entered:</label>
            <input data-msg-maxlength="The field MaxLength must be a string with a maximum length of 7." data-rule-maxlength="7" 
                id="StringLengthMaxOnly" name="StringLengthMaxOnly" type="text" value="12345678" />
        </div>
        <div class="row">
            <label for="MaxLength">A maximum of 9 characters can be entered:</label>
            <input data-msg-maxlength="The field MaxLength must be a string or array type with a maximum length of '9'." data-rule-maxlength="9" 
                id="MaxLength" name="MaxLength" type="text" value="1234567890" />
        </div>
        <div class="row">
            <label for="MinLength">A minimum of 6 characters can be entered:</label>
            <input data-msg-minlength="The field MinLength must be a string or array type with a minimum length of '6'." data-rule-maxlength="6" 
                id="MinLength" name="MinLength" type="text" value="12345" />
        </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!");
      }
  });