4

I have server side validation messages for some of my text fields. The field 'title' is a required field server side with a '[Required]' data attribute in the class, but this only seems to get checked on a postback or form submit. I'm saving the 'title' text field on a jquery .change event, sudo code below. But I want to use my validationmessagefor to show the error message from the client side check. Not sure how to go about doing this?

html.

@Html.ValidationMessageFor(model => model.Overview.Title, "", new { @class = "text-danger" })

rendered as

<span class="field-validation-valid text-danger" data-valmsg-for="Overview.Title" data-valmsg-replace="true"></span>

If I want to do some client side checking in javascript and then use this element to display a client side error message can I do so. I'm just trying to save myself of using another hidden element. I know I would have to use

data-valmsg-for="Overview.Title"

because the other data attributes are the same for all the other text fields.

Whats the best way to do display client side error messages here if I want to check to make sure the "title" has length greater then 1?

Maybe something like -

$('#Overview_Title').change(function() {
    var title = $(this).val();
    if (title.length == 0) {
      // show error message "title has to be a value to save"
      }
    else {
      // do other work like save to db
      }
  });
chuckd
  • 13,460
  • 29
  • 152
  • 331
  • Does your client-side validation only trigger on submit or does it never fire at all? – Rondel Apr 17 '15 at 18:56
  • it never fires because I don't have any client-side validation yet. This particular page doesn't have any form submit or any save button. Everything gets saved on jquery .change() events. – chuckd Apr 17 '15 at 18:59
  • So what I'm looking to do is, when the change event happens I do the check for a value, if none exists because the user removed/deleted the value from the text field then I will display an error message saying 'value required' to make a change' – chuckd Apr 17 '15 at 19:01
  • Where do you do the change event? which control? – IndieTech Solutions Apr 17 '15 at 19:10

2 Answers2

4

You've got a few ways to do this but I'd argue that this is the easiest way:

MVC will by default bundle the jquery.validate javascript library into your page. Since you are already marking the field with the [Required] attribute, the Html.EditorFor will bind the correct attributes into your HTML for you so that validation can happen as necessary.

To make your current logic work with the smallest changes, you could add a <form> tag around your input field(s). I think you need this for the validate method to work out of the box. Then your javascript would change to something like this:

$('#Overview_Title').change(function() {
if ($(this).valid()) {
  // do your stuff
  }
else {
  // error message displayed automatically. don't need to do anything here unless you want to
  }
});

This would allow you to use the Required attribute to set your error message text and your ValidationMessageFor should display the error message without any extra effort on your part.

Check out this plunkr as a proof of concept: http://plnkr.co/edit/ip04s3dOPqI9YNKRCRDZ?p=preview

EDIT

I'm not positive I understand your follow-up question. But if you wanted to add a rule to a field dynamically, you could do something along these lines:

$( "#someinput" ).rules( "add", {
 required: true,
 messages: {
 required: "a value is required to save changes"
 }
});

You could add rules that aren't reflected server side by doing something like this. Then you could validate that input in the same way.

Rondel
  • 4,811
  • 11
  • 41
  • 67
  • this works! but lets say I have a summary text field and it can be empty, so there is no '[required]' attribute, BUT if there is a value in it and the user removes it and it's blank and then the change is triggered to save, I need it to say something like 'a value is required to save changes'. How would that work? – chuckd Apr 17 '15 at 19:49
  • @user1186050 You can add `rules` that are only on the client if they aren't reflected in your model. I edited my answer to show what that may look like. – Rondel Apr 17 '15 at 20:04
0

If you want to do 100% client side validation using jquery you can use something like this:

$('#Overview_ISBN').on('input', function() {
    var input=$('#Overview_Title');
    var is_name=input.val();
    if(is_name){input.removeClass("invalid").addClass("valid");}
    else{input.removeClass("valid").addClass("invalid");}
});

Here's the code of JSFiddle link

In the example i posted , if you start typing the ISBN and the Title is empty, you will get the error message.

Not sure in your question how you want to trigger the error so i assumed it's an entry in a different input

Smit Patel
  • 2,992
  • 1
  • 26
  • 44
IndieTech Solutions
  • 2,527
  • 1
  • 21
  • 36