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
adricadar
  • 9,971
  • 5
  • 33
  • 46
user2443476
  • 1,935
  • 9
  • 37
  • 66

2 Answers2

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").

adricadar
  • 9,971
  • 5
  • 33
  • 46
  • 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 – user2443476 Jun 02 '15 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 02 '15 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 ? – user2443476 Jun 02 '15 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 02 '15 at 15:56
  • I have followed your suggestion, and I have an exception error that I describe in my first post. – user2443476 Jun 03 '15 at 07:11
  • @user2443476 What asp.net mvc version you are using? – adricadar Jun 03 '15 at 07:12
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/79498/discussion-between-user2443476-and-adricadar). – user2443476 Jun 03 '15 at 07:58
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")
Mairaj Ahmad
  • 14,434
  • 2
  • 26
  • 40