jqxValidator rule: how set message with language selected? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

This topic contains 1 reply, has 1 voice, and was last updated by shardik 5 years, 2 months ago.

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

Author

jqxValidator rule: how set message with language selected? Posts

October 24, 2019 at 8:44 am jqxValidator rule: how set message with language selected? #107125

Participant

In this sample:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="keywords" content="jqxValidator, jQuery Validation, jQWidgets, Default Functionality" />
    <title id='Description'>This demo demonstrates the Label hints of jqxValidator.</title>
    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />	
    <script type="text/javascript" src="../../../scripts/jquery-1.12.4.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/demos.js"></script> 
    <script type="text/javascript">
        $(document).ready(function () {
            $("#register").jqxExpander({ toggleMode: 'none', width: '320px', showArrow: false });
            $('#sendButton').jqxButton({ width: 60, height: 30 });

            $('#sendButton').on('click', function () {
                $('#testForm').jqxValidator('validate');
            });

            $('.text-input').jqxInput({ width:250, height:30 });

            // initialize validator.
            $('#testForm').jqxValidator({
				hintType: "label",
                rules: [
                       { input: '#userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
                       { input: '#userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup, blur', rule: 'length=3,12' }
                       ]
            });
        });
    </script>
    <style type="text/css">
        .text-input
        {
            height: 30px;
            width: 250px;
        }
        .register-table
        {
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .register-table td, 
        .register-table tr
        {
            margin: 0px;
            padding: 5px;
            border-spacing: 0px;
            border-collapse: collapse;
            font-family: Verdana;
            font-size: 12px;
        }
        h3 
        {
            display: inline-block;
            margin: 0px;
        }
    </style>
</head>
<body class='default'>
    <div id="register">
        <div><h3>Register</h3></div>
        <div>
            <form id="testForm" action="./">
                <table class="register-table">
	                
				<tr>
				
						<td><input placeholder="User name" 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>

how is possible change the message’s rule (for each rules) from ‘message default!’ to ‘message in another language!’ without page reload ?

October 25, 2019 at 9:44 am jqxValidator rule: how set message with language selected? #107146

shardik

Participant

solved!

var jsonRules = $('#testForm').jqxValidator('rules');
    for (var i = 0; i < jsonRules.length; i++) {
        var message = [new message from a key]
        jsonRules[i].message = message;
    }
    $('#testForm').jqxValidator('rules', jsonRules);

Author

Posts

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

You must be logged in to reply to this topic.