0

I am developing an asp.net mvc app where an user can fill a textbox. The textbox field is required and the validation is performed when he clicks on submit.

But I have another concern, I would like to display a message when the user types more than 10 characters in the textbox. This needs to validate without clicking on any validate button.

This is my current code :

<span class="field">@Html.TextBoxFor(d => d.Name,new {maxlength=10})</span>

With this, the user cannot exceed the character limit, but there is no message displayed. I would like to display a message automatically when he tries to write the eleventh character.

I have followed the suggestion of adricadar, so my property looks like this now :

    [Required]
    [StringLength(10, ErrorMessage = "Too many characters.")]        
    public string Name { get; set; }

But now, when I am trying to access the page, I am getting this exception :

errormessagestring or errormessageresourcename must be set but not both
2

2 Answers 2

1

You can add on the Name property the StringLength attribute. This validate the input while the user is typing. This will include server and client side validation.

[StringLength(10, ErrorMessage = "Too many characters.")]
public string Name { get; set; }

Note: The attribute isn't adding to the input maxlength=10 attribute, it's adding a custom attribute data-val-length-max=10.

Don't forget to include @Scripts.Render("~/bundles/jqueryval").

7
  • I already add a StringLength attribute on my property, the problem is that the message is displayed only when the user validates the form, until then, he can write any number of characters he wants in the textbox Jun 2, 2015 at 14:52
  • @user2443476 I just tested. It allows to write more than 10 values, but it's validating as I'm typing, I can make a gif if you want. Have you included the jQuery validate libraries?
    – adricadar
    Jun 2, 2015 at 15:12
  • Ok I can't try now but I will keep you informed. I assume I have to remove the "new {maxlength=10})" parameter in my textbox ? Jun 2, 2015 at 15:40
  • @user2443476 You are right, I removed that parameter. Also, I further testing it an sometimes you have to click (or to make other action) outside the input (not submit button), when you come back again, it works.
    – adricadar
    Jun 2, 2015 at 15:56
  • I have followed your suggestion, and I have an exception error that I describe in my first post. Jun 3, 2015 at 7:11
0

You can use StringLength of DataAnnotation along with unobtrusive jquery which will show your error messages in real time. But you will have to enable unobtrusive before you can use it.

[Required]
[StringLength(5, ErrorMessage = "Too many characters",MinimumLength=2)]
public string Name { get; set; }

In view you can enable unobtrusive jquery like this

HtmlHelper.ClientValidationEnabled = true;
HtmlHelper.UnobtrusiveJavaScriptEnabled = true; 

You can also enable this for whole application if you set this in web.config.

Finally you will have to add ValidationMessageFor in view to show errors associated with model.

So you final view code looks like this

@using (Html.BeginForm()) {
HtmlHelper.ClientValidationEnabled = true;
HtmlHelper.UnobtrusiveJavaScriptEnabled = true; 
@Html.ValidationSummary()

 @Html.LabelFor(m => m.Name)
 @Html.TextBoxFor(m => m.Name)
 @Html.ValidationMessageFor(m => m.Name)

}

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.