Validation

This sample shows how you can use the wjValidationError directive to validate fields using HTML5 native validation or AngularJS's form validation.

The wjValidationError directive contains an expression that returns an error string. If the string is empty, the element is considered valid. If the string is not empty, the field is considered invalid and the string is used as an error message.

For example, the forms below have a "check password" field that is defined as follows:

<input type="password"
    placeholder="Password" 
    name="pwd" ng-model="thePwd" 
    required pattern=".{2,}" title="Please enter 2 characters or more." />
<input type="password"
    placeholder="Check Password"
    name="chk" ng-model="chkPwd"
    wj-validation-error="chkPwd != thePwd ? 'Passwords don\'t match' : ''" />

The forms also include Wijmo InputDate and InputField controls. Both of these controls have min and max properties that take care of simple validation and actually prevent the user from entering invalid data. In this sample, we did not use those properties to demonstrate that Wijmo input controls can be validated just like native input elements.

Check what happens when you start entering data on either form.

The form on the left shows validation errors with red bars. Some browsers add a tooltip to invalid input elements. If you press "Create Account" while any of the fields is in an invalid state, the browser will show an error message on the first invalid field.

The form on the right shows validation errors when you modify a field and move the focus to the next element. It may show several errors at once. The "Create Account" button is disabled until there are no errors.

Note that although HTML5 specifies several validation attributes, not all browsers support them all. For example, IE11 does not support the HTML5 'minlength' attribute, but Chrome does. In this sample, we used the 'pattern' attribute to work around this limitation.We could also have used the 'wj-validation-error' or 'ng-minlength' directives.

HTML5 + wjValidationError

AngularJS Form Validation

We need a name with 2 characters or more.
We need a valid e-mail address.
Passwords must have at least 4 characters.
Sorry, the passwords don't match.
Please select a date after today.
Please select a time after 9 am...