jQWidgets Forums

Tagged: hintRender, jqxvalidator, validation, validator

This topic contains 6 replies, has 3 voices, and was last updated by mallepaddi 11 years, 6 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

hintRender Validator Posts

November 21, 2013 at 8:29 pm hintRender Validator #33100

jegj

Participant

Hi!, i need help with jqxValidator and the hitRender function in the rules. Can you give me an example how i can customize the hitrender function.

Thanks.

November 22, 2013 at 8:44 am hintRender Validator #33131

Dimitar

Participant

Hello jegj,

Here is an example, showcasing hintRender:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxvalidator.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmaskedinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme()
            $('#sendButton').on('click', function () {
                $('#testForm').jqxValidator('validate');
            });
            var that = this;
            var render = function (message, input) {
                if (that._message) {
                    that._message.remove();
                }
                that._message = $("<span style='background: blue; color: white;'>" + message + "</span>")
                that._message.appendTo($(document.body));
                return that._message;
            }
            $('#testForm').jqxValidator({
                rules: [
                    { input: '#userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required', hintRender: render },
                    { input: '#userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12', hintRender: render }
            ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="register">
        <div>
            <h3>
                Register</h3>
        </div>
        <div>
            <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 colspan="2" style="text-align: center;">
                        <input type="button" value="Send" id="sendButton" />
                    </td>
                </tr>
            </table>
            </form>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 22, 2013 at 2:49 pm hintRender Validator #33172

jegj

Participant

OH !! Thanks!!!!!

November 26, 2013 at 12:41 am hintRender Validator #43082

mallepaddi

Participant

Above example throwing an error “ReferenceError: that is not defined”

Thanks

November 26, 2013 at 5:51 am hintRender Validator #43470

Dimitar

Participant

Hello mallepaddi,

Please make sure you have correctly referenced all the needed jQWidgets files and that you are using the latest version (3.0.4).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 26, 2013 at 10:48 am hintRender Validator #43820

mallepaddi

Participant

yes, I have included all files as per given example and using 3.04 version too.

Could you please confirm what was “message” is that a field ?

Thanks

November 26, 2013 at 10:51 am hintRender Validator #43823

mallepaddi

Participant

Sorry, it works

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.