jQuery UI Widgets Forums Navigation Tabs jqxTabs with different validation on each tab

This topic contains 5 replies, has 2 voices, and was last updated by  douglas168 6 years, 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • douglas168
    Participant

    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!


    Stanislav
    Participant

    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/


    douglas168
    Participant

    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!


    Stanislav
    Participant

    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/


    douglas168
    Participant

    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!


    douglas168
    Participant

    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.

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

You must be logged in to reply to this topic.