jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 11 years ago.

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

Author

jqxValidator with Tabs Posts

June 4, 2014 at 11:59 am jqxValidator with Tabs #55314

Participant

Hi ,
I am using jqxtabs ,and each tab has forms fields . the problem is i want error icon to come on all tabs if there is any validation error on click of a button . But currently error icon is getting displayed only on tab which is currently selected by user. not on unselected tabs, Please provide solution to this problem.

June 4, 2014 at 12:21 pm jqxValidator with Tabs #55317

Peter Stoev

Keymaster

Hi deepak_chaurasia,

Could you send a sample which demonstrates your application scenario(preferably in jsfiddle.net)? That will help us to test your specific situation.

Best Regards,
Peter Stoev

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

June 5, 2014 at 3:31 am jqxValidator with Tabs #55372

deepak_chaurasia

Participant

Hi, Please find code that i tried
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta name=”keywords” content=”jQuery Tabs, Tabs Widget, TabView, jqxTabs” />
<meta name=”description” content=”The jqxTabs is breaking the content into multiple sections. You
can populate it from ‘UL’ for the tab titles and ‘DIV’ for it’s contents.” />
<title id=’Description’>The jqxTabs is breaking the content into multiple sections.
You can populate it from ‘UL’ for the tab titles and ‘DIV’ for it’s contents.
</title>
<link rel=”stylesheet” href=”js/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”js/jquery/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”js/jqxcore.js”></script>
<script type=”text/javascript” src=”js/jqxtabs.js”></script>
<script type=”text/javascript” src=”js/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”js/jqxbuttons.js”></script>
<script type=”text/javascript” src=”js/jqxinput.js”></script>
<script type=”text/javascript” src=”js/jqxvalidator.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// Create jqxTabs.
$(‘#animation’).jqxButton({width:200});
$(“#input1”).jqxInput({placeHolder: “Enter a Country”, height: 25, width: 200, minLength: 1});
$(“#input2”).jqxInput({placeHolder: “Enter a state”, height: 25, width: 200, minLength: 1});
$(“#input3”).jqxInput({placeHolder: “Enter a city”, height: 25, width: 200, minLength: 1});
$(“#input4”).jqxInput({placeHolder: “Enter a continent”, height: 25, width: 200, minLength: 1});
$(“#input5”).jqxInput({placeHolder: “Enter a village”, height: 25, width: 200, minLength: 1});
$(‘#jqxTabs’).jqxTabs({ width: ‘90%’, height: 200, position: ‘top’});

$(‘#jqxTabs’).unbind(‘selected’).bind(‘selected’, function (event) {
var selectedTab = event.args.item;
var text = $(‘#jqxTabs’).jqxTabs(‘getTitleAt’, selectedTab);
alert(text)
});
$(‘#settings div’).css(‘margin-top’, ’10px’);

$(‘#animation’).on(‘click’, function () {
$(‘#jqxWidget’).jqxValidator(‘validate’);
});

$(‘#jqxWidget’).jqxValidator({
rules: [
{ input: ‘#input1’, message: ‘Username is required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#input2’, message: ‘Username’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#input3’, message: ‘Username asdadsadais required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#input4’, message: ‘Username 1231231300000is required!’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#input5’, message: ‘Username is required!—————‘, action: ‘keyup, blur’, rule: ‘required’ }]
});

});
</script>
</head>
<body class=’default’>
<div id=’jqxWidget’>
<div id=’jqxTabs’>

JavaServer Pages
Active Server Pages
Python
Perl

<div>
<input type=”text” id=”input1″>
</div>
<div>
<input type=”text” id=”input2″>
</div>
<div>
<input type=”text” id=”input3″>
</div>
<div>
<input type=”text” id=”input4″>
</div>
<div>
<input type=”text” id=”input5″>
</div>
</div>
<div id=’settings’>
<div id=’animation’>
Enable Select Animation</div>
</div>

</div>
</body>
</html>

June 6, 2014 at 1:07 pm jqxValidator with Tabs #55501

Peter Stoev

Keymaster

Hi deepak_chaurasia,

According to me, hintType: ‘label’ would be more appropriate for your scenario.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jqxValidator, jQuery Validation, jQWidgets, Default Functionality" />
    <meta name="description" content="jqxValidator is a plug-in which enables you to validate html forms.
    It has a set of built-in rules (required inputs, e-mail, SSN, ZIP, max value, min value, interval etc.) 
     for validating the user input. You can also write a custom rule which will fit best to your requirements." />
    <title id='Description'>This demo demonstrates the basic functionality of the jqxValidator plugin.</title>
    <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/jqxtabs.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 () {
            // Create jqxTabs.
            $("#animation").jqxButton({ width: 200 });
            $("#input1").jqxInput({ placeHolder: "Enter a Country", height: 25, width: 200, minLength: 1 });
            $("#input2").jqxInput({ placeHolder: "Enter a state", height: 25, width: 200, minLength: 1 });
            $("#input3").jqxInput({ placeHolder: "Enter a city", height: 25, width: 200, minLength: 1 });
            $("#input4").jqxInput({ placeHolder: "Enter a continent", height: 25, width: 200, minLength: 1 });
            $("#input5").jqxInput({ placeHolder: "Enter a village", height: 25, width: 200, minLength: 1 });
            $("#jqxTabs").jqxTabs({ width: "90%", height: 200, position: "top" });

            $("#jqxTabs").unbind("selected").bind("selected", function (event) {
                var selectedTab = event.args.item;
                var text = $("#jqxTabs").jqxTabs("getTitleAt", selectedTab);
                alert(text)
            });
            $("#settings div").css("margin-top", "10px");

            $("#animation").on("click", function () {
                $("#jqxWidget").jqxValidator("validate");
            });

            $("#jqxWidget").jqxValidator({
                hintType: 'label',
                rules: [
                { input: '#input1', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
                { input: '#input2', message: 'Username', action: 'keyup, blur', rule: 'required' },
                { input: '#input3', message: 'Username asdadsadais required!', action: 'keyup, blur', rule: 'required' },
                { input: '#input4', message: 'Username 1231231300000is required!', action: 'keyup, blur', rule: 'required' },
                { input: '#input5', message: 'Username is required!---------------', action: 'keyup, blur', rule: 'required' }]
            });
        });
    </script>

</head>
<body class='default'>
    <div id="jqxWidget">
        <div id="jqxTabs">

            <ul>
                <li style="margin-left: 30px;">Node.js</li>
                <li>JavaServer Pages</li>
                <li>Active Server Pages</li>
                <li>Python</li>
                <li>Perl</li>
            </ul>
            <div>
                <input type="text" id="input1">
            </div>
            <div>
                <input type="text" id="input2">
            </div>
            <div>
                <input type="text" id="input3">
            </div>
            <div>
                <input type="text" id="input4">
            </div>
            <div>
                <input type="text" id="input5">
            </div>
        </div>
        <div id="settings">
            <div id="animation">
                Enable Select Animation
            </div>
        </div>

    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.