Using html.validationmessage for client side error message
I have server side validation posts for some of my text fields. The "title" field is a required field server side with a "[Required]" data attribute in the class, but this seems to be validated on postbacks or submit. I am storing the "title" textbox in jquery.change event, sudo code below. But I want to use my validationmessagefor to show the error message from client side validation. Not sure how to do this?
HTML.
@Html.ValidationMessageFor(model => model.Overview.Title, "", new { @class = "text-danger" })
displayed as
<span class="field-validation-valid text-danger" data-valmsg-for="Overview.Title" data-valmsg-replace="true"></span>
If I want to do client side validation in javascript and then use that element to display an error message on the client side, can I do that. I am just trying to save myself from using another hidden item. I know I will have to use
data valmsg-per = "Overview.Title"
because the other data attributes are the same for all other text fields.
What is the best way to display client side error messages here if I want to check that the "title" is greater than 1 in length?
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
}
});
source to share
You have several ways to do this, but I would say this is the simplest way:
MVC will link the javascript library jquery.validate
in your page by default . Since you are already checking the field with the attribute [Required]
, Html.EditorFor
will bind the correct attributes in your HTML for you so that validation can happen as needed.
To keep your current logic running with minimal changes, you can add a tag <form>
around your input fields. I think you need this for the method validate
to work out of the box. Then your javascript will 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 will allow you to use an attribute Required
to set the text of the error message, and yours ValidationMessageFor
should display the error message without any additional effort on your part.
Mark this plunkr as a proof of concept: http://plnkr.co/edit/ip04s3dOPqI9YNKRCRDZ?p=preview
EDIT
I'm not sure I understand your follow-up question. But if you want to add a rule to the field dynamically, you can do something along these lines:
$( "#someinput" ).rules( "add", {
required: true,
messages: {
required: "a value is required to save changes"
}
});
You can add rules that are not reflected on the server side by doing something like this. Then you can check this input in the same way.
source to share
If you want to do 100% client side validation with 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 JSFiddle link
In the example above, if you start typing the ISBN and Title is empty, you will get an error.
Not sure about your question how you want to trigger the error, so I assumed it was an entry in another input
source to share