Documentation

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second CSS file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxValidator.

jqxValidator Style
jqx-validator-hint - applied to every error popup.
jqx-validator-hint-arrow - applied to the arrow of the popup (if the arrow is allowed).

When you create a custom style with colors and backgrounds for jqxValidator, you need to do the following:

Add the above CSS classes related to jqxValidator
After each CSS class, add your theme name.
For example:
jqx-validator-hint-summer
To apply your custom style to jqxValidator, you need to set its 'theme' property (option) to point to your theme name string.

The sample below demonstrates how to set the 'summer' theme to jqxValidator.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jQuery Validation Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#testForm').jqxValidator({ rules: [
                { input: '#userInput', message: 'The username should be more than 3 characters!', action: 'keyup', rule: 'minLength=3' },
                { input: '#emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email'}],
                theme: 'summer'
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>
<form id="testForm" action="./">
    <table class="register-table">
        <tr>
            <td>Username:</td>
            <td><input type="text" id="userInput" class="text-input" /></td>
        </tr>
        <tr>
            <td>E-mail:</td>
            <td><input type="text" id="emailInput" class="text-input" /></td>
        </tr>
    </table>
</form>
</body>
</html>

Documentation

Styling and Appearance

jqxValidator Style