Model/Form validation using Data Annotations and JavaScript

Question

I would like to implement Data Validations on my ASP MVC app. I am currently using Data Annotations like this:

[Required]
public string UserName { get; set; }

Which would then turn into something like

<input type='text' ... data-required>

I can validate it fine using jquery unobtrusive validation, however, this project does not have jQuery. It is built straight from Javascript and we plan to keep it that way.

Is there any way I can do this without jQuery?

Answer 1

So, as per the comment, there are libraries that implement model validation in Javascript. I have written one, Egkyron, and being using it in my work. With these libraries you define your validation rules for the model, not the UI, just as in the server-side.

Assume a User model defined in JS as:

function User() {
  this.userName = null;
  this.password = null;
  this.passwordVerification = null;
}

You can define its validation rules as the equivalent of JS annotations:

User.validators = {
  // key is property name from the object; value is the validation rules
  userName: [
    // the userName is required...
    'required',
    // ...and some arbitrary rules for demonstrating:
    // "the user name starts with a lower-case letter and consists only of lower-case letters and numbers"
    ['regexp', {re: /^[a-z][a-z0-9]*$/}],
    // "the length of the user name is between 5 and 8 characters (inclusive)"
    ['length', {min: 5, max: 8}]
  ]
};

If using Babel or Typescript, you can check out the decorators, a proposal for the ES7 specification. A TS class could be annotated as:

class User {
    @Required()
    @RegExp(/^[a-z][a-z0-9]*$/)
    @Length({min: 5, max: 8})
    userName: string;
    ...
}

This is very close to what you write in the server side with Java or C#. In fact, in a previous project, we generated the JS classes + validation rules from the server-side C# classes.

Then, assuming you get hold of a User object, you can validate it with Egkyron as:

var validator = new egkyron.Validator(/* see the example for constructor arguments */);
var user = ...; // instance of a User
var validationResult = validator.validate(user).result;

The validator is reusable; if user = new User() the validationResult looks like:

{   // validation result for the given User
    _thisValid: true, // no validation rules of **this** object failed
    _validity: null,  // there are no validation rules for this object (only for its properties)
    _childrenValid: false, // its properties and/or children objects are invalid
    _children: {      // detailed report of its children objects/properties
        userName: {   // child property name
            _thisValid: false, // the userName is invalid (required but not given)
            _children: null,   // terminal node, no children
            _validity: { // detailed report about each validation rule
                required: { isValid: false, ... }, // the "required" constraint failed
                regexp: { isValid: true, ... },    // empty value => regexp validity defaults to true
                length: { isValid: true, ... }     // empty value => length validity defaults to true
            }
        },
        ...
    }
}

Having acquired a validation result, you probably want to present it to the UI. There are myriads of different requirements and tiny variations upon them. I believe it is impossible to satisfy all of them. Even if we could satisfy them all, the library size would be enormous and, most probably, the library itself not really usable.

So Egkyron leaves the UI integration to the user. There are examples, and I will happily answer any questions/issues.

Besides the examples, here is a plunk with the plain browser JS example above.