jqxTabs with different validation on each tab

[douglas168Participant]

Hi,

Need help!

I have a jqxTabs with each tabs having its input fields and submit button and I need to validate the input fields JUST on that tab when submit button is clicked. Is there any sample code that I can see how it is done?

Appreciate the help!

[StanislavParticipant]

Hello douglas168,

Take a look at this example, Link.
It is the exact demo Wizard from our web site. It has validation on the first page, with the inputs and checkbox, and a select validation on the second tab.

Best Regards,
Stanislav

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

[douglas168Participant]

hi Stanislav,

Thank you for pointing me to that example. I took a look. It does validation however, I am looking for more like jqxValidator where each validation message is below corresponding input box on that tab and validation is only done on that tab selected Is it possible?

Kind like below,

$(‘#jqxTabs’).jqxValidator({
hintType: ‘label’,
animationDuration: 0,
rules: [
// when tab 1 is selected
{input: ‘#inputTab1A’, message: ‘CAN NOT BE BLANK’, action: ‘blur, keyup, valueChanged’, rule: ‘required’},
{input: ‘#inputTab1B’, message: ‘CAN NOT BE BLANK’, action: ‘blur, keyup, valueChanged’, rule: ‘required’},

// when tab 2 is selected
{input: ‘#inputTab2A’, message: ‘CAN NOT BE BLANK’, action: ‘blur, keyup, valueChanged’, rule: ‘required’},
{input: ‘#inputTab2B’, message: ‘CAN NOT BE BLANK’, action: ‘blur, keyup, valueChanged’, rule: ‘required’},

]
});

Appreciate the help!

[StanislavParticipant]

Hello douglas168,

Here is an example: Link
I updated it with checkboxes and inputs, that vahe validation in the form of a red text right under the element.
I hope this helps you.

Best Regards,
Stanislav

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

[douglas168Participant]

Hi Stanislav,

The code from that link is what I need. Thank you.

However, because one of my input field is jqxComboBox, that jqxComboBox’s validator keeps saying “Text is required” even if there is text in the input box.

How do I fix this problem?

Appreciate the help!

[douglas168Participant]

Hi Stanislav,

I use

{
input: ‘#borrower’, message: ‘Text is required！’, action: ‘blur, keyup’, rule: function (input) {

var val = $(“#borrower input”).val();
if (val == “”) {
return false;
}
return true;
}
},

to validate and it seems to work with jqxComboBox. So far so good! Thanks again Stanislav.

[Author]

Posts