Validation for selecting a minimum and maximum

Question

I have a form where a min and a max have to be entered by user. What is the recommendation for validation for this case. Only server validation or client and server validation.

How do you validate on client both inputs? Do you know of an example that does this?

UPDATE

The validation I am talking about is the compare validation (all other validation I know how to do, there are a lot of examples on the internet). However I did not found a client validation for having two fields that are connected with compare.

Basically how do you do client validation for min that it has a value less than max and a validation for max that it has a value less than min. Or what is the recommended alternatives to this.

NEW UPDATE

It seems that the first phrase of my question has been lost. On a form I have two input fields lets say FieldA and FieldB. FieldA has to be less than FieldB and FieldB has to greater than FieldA.

My question refers to: Is there an example on how to do this kind of validation. Since the common response is to do validation on a client then my question would be what validation should I add to the two fields? Do I make both field not valid when the conditions are not met. If yes then how do I make both fields valid again after the user has changed one of the fields.

Answer 1

Both.

The reason:

• client validation only: your server will be hacked.
• server side only: your users will be annoyed, although it's better than client side only
• both: happy users, not hack-able. A little bit of more work though.

---

As for the techniques, there are loads, depending on your setup. You could use DataAnnotations with validation attributes server side, and there are tons of jquery , angular , knockout etc. validation plugins for client side javascript.

---

Addition: As @bradbury9 states: server side validation "fairly easy"

An example of jQueries validation can be found here :

 <script> $(document).ready(function(){ $("#commentForm").validate({ rules: { name: "required", email: { required: true, email: true, }, comment: "required" } });}); </script>

note : as stated before: client side validation is highly dependent on the technique you are using. For AngularJs there is eg: this library.

---

update

On your request, for a min max, aka range validation, an example with attributes (server-side):

 //model public class Foo { [Range(1, 100)] [DataType(DataType.Currency)] public decimal Price { get; set; } }

And the controller:

 // POST: Movies/Create [HttpPost] [ValidateAntiForgeryToken] public async Task<IActionResult> Create(Foo foo) { if (!ModelState.IsValid) { //error } }

And the javascript side:

 $( "#commentForm").validate({ rules: { field: { required: true, range: [13, 23] } } });

See source for details.