Introduction

Validation during data entry is a universally accepted best practice for web developers to ensure that the data stored in a database is correct, consistent, and secure. However, manually coding the validation process can be time-consuming and prone to errors. This is where jQuery comes in handy. With the help of convenient jQuery validation plugins, developers can streamline the form validation process, eliminate possible errors, and enhance user experience. One such plugin is the ValidationEngine.

The ValidationEngine

ValidationEngine is a jQuery plugin that provides automatic form validation. It has a straightforward setup process with plenty of pre-defined validation rules. It is highly customizable and supports localization in various languages. Its main features are:

1. Simple setup and API

2. Pre-defined basic validation rules like email, name, number, etc.

3. Support for custom rules

4. Support for Conditional validation

5. Supports Ajax validation

6. Supports localization in various languages

How to Use ValidationEngine

Before we start using ValidationEngine, we must ensure that we have jQuery installed on our system. We can download the latest version of jQuery from the official site. Once we install jQuery, we can proceed with the following steps:

Step 1: Load jQuery and ValidationEngine Script

First, we need to load jQuery and ValidationEngine script. We can use CDN links to load these scripts directly. Add the following code to your HTML:

```

```

Step 2: Configure ValidationEngine

In this step, we need to configure the ValidationEngine for our form. We can use the following code to configure the ValidationEngine:

```

$(document).ready(function(){

$(‘#myForm’).validationEngine();

});

```

The above code will initialize the validation engine on the form and attach default validation rules to the input fields. The form's 'id' attribute is specified as myForm. We can change the form's 'id' attribute as per our requirement.

Step 3: Use Pre-Defined Validation Rules

ValidationEngine has a pre-defined set of validation rules that we can use for our form. We need to specify the type of validation required for each input field. The following code snippet demonstrates how to implement validation rules for input fields:

```

Email

```

The above code shows how to add a pre-defined email validation rule to the email input field.

Step 4: Use Custom Validation Rules

ValidationEngine also supports custom validation rules. We can add a custom validation rule for our input field by creating a new function with the required validation logic. For example:

```

$.fn.customValidation = function(){

var regExp = /\d+/;

if(!regExp.test($(this).val())){

return “Please enter a valid phone number”;

}

}

```

The above code demonstrates how to add a custom validation rule to a phone number input field that checks whether it contains only numeric characters.

Step 5: Implement Conditional Validation

ValidationEngine supports conditional validation, which means we can enable or disable validation for an input field based on certain conditions. We can add conditional rules to our input fields as follows:

```

data-error-message-custom-required="This field is required">

```

The above code demonstrates how to add conditional validation to a phone number field. The 'condRequired' parameter in the validation rule signifies that the input's value is required if the 'yes' checkbox is checked.

Conclusion

ValidationEngine is a user-friendly and powerful jQuery validation plugin. With its pre-defined set of validation rules, custom validation rules, and conditional validation, it can help web developers quickly validate the form data, save time, and reduce the possibility of errors. Moreover, its compatibility with various languages makes it even more suitable for projects with diverse user bases. We hope that this article has provided you with a basic understanding of ValidationEngine and how to use it in your web development projects.