Webix Blog Form Handling with Validation Messages

Form Handling with Validation Messages

By Mariya Lutova | June 22, 2015

Starting with version 2.4, Webix provides you with a new way of user interaction improvement. Validation Messages can be pretty useful in case you want to make sure that users will fill in all your web forms properly.

Let’s take a look at how it works. Here’s an example of a registration form:

Registration form

You can check the Form documentation page if you want to get more details of form creation with Webix.

When the appearance of your form is fully fine-tuned, you can think about the validation process. There are some Predefined Validation Rules which can help you with that. They can be accessed through the webix.rules class. Here they are:

isNotEmpty – checks whether a value is empty;
isNumber – checks whether a value is a number;
isEmail – checks whether a value is an e-mail (looks for an @-sign, fullstop, text after it);
isChecked – checks whether a checkbox is checked.

You should “connect” the needed rule to a proper form field through the name property. To inform a user in case the inserted value is incorrect, Validation Message is used. You can use this feature by adding the invalidMessage property to the field description. This property will set the text of the message which will appear in case the input string doesn’t comply with the set rule.

Here’s how it works:

view:"form",
elements:[
{ view:"text", label:'Username', name:"login", invalidMessage: "Username can not be empty" },
{ view:"text", label:'E-mail address', name:"email", invalidMessage: "Incorrect e-mail address" },
/* some more elements */
],
rules:{
"login": webix.rules.isNotEmpty,
"email": webix.rules.isEmail,
/* some more rules */
}

When you click the Submit button to validate the input data, Webix will let you know if there’s something wrong:

Incorrect e-mail address

Now the field with incorrect input value is highlighted and there is the error message that we have defined earlier.

As you can see, it’s pretty easy to avoid possible misunderstandings using the Validation Message feature. And don’t forget to get the latest version of Webix before you try this!

You can check out the source code and the demo of this example in the snippet editor.