Tabbed Form Not Able to Validate or Submit

[cspaffordMember]

I have a multi-tabbed form that I cannot submit or validate using the jqxValidator. The “save” button I created doesn’t throw a Javascript error or do anything. Code is as follows:

=== Tab widget ===

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5

*** The PHP includes are just HTML forms.
*** The inc.details.php file has the opening tag and the inc.billing.php file has the closing tag.

=== Save button HTML ===

=== Save button Javascript (inside “$(document).ready” function ===
$(‘#saveButton’).jqxButton({ width: 60, height: 25, theme: theme });
$(‘#saveButton’).bind(‘click’, function () { $(‘#settingsForm’).jqxValidator(‘validate’); });

=== Validator Javascript ===
$(‘#settingsForm’).jqxValidator({ onSuccess: function () { alert(‘form should submit’); document.forms[“settingsForm”].submit(); } });
$(‘#settingsForm’).jqxValidator({
rules: [
{ input: ‘#usernameInput’, message: ‘Username is required’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#emailInput’, message: ‘Email address is required’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#fnameInput’, message: ‘First name is required’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#lnameInput’, message: ‘Last name is required’, action: ‘keyup, blur’, rule: ‘required’ },
{ input: ‘#unitInput’, message: ‘Agency name is required’, action: ‘keyup, blur’, rule: ‘required’ }
]
});

The problem is the form never gets validated and the form doesn’t submit, either. The “alert(‘form should submit’);” line never runs in the onSuccess of the validator.

Any help will be greatly appreciated.

[DimitarParticipant]

Hello cspafford,

Everything seems in order from the provided code. We will need your HTML, too, to be able to determine the source of the issue.

Best Regards,
Dimitar

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

[cspaffordMember]

I decided to make each tab it’s own form and detect form changes when switching tabs. That works just fine. The save button still doesn’t submit the form through the validator. Nothing happens when I click the save button.

In the HEAD of the document:

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/jqwidgets/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="css/jqwidgets/jqx.kims.css" type="text/css" />
<script src="includes/js/jquery-1.9.0.js"></script>
<script src="includes/js/inc.functions.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxcore.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxwindow.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxbuttons.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxvalidator.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxcalendar.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxdatetimeinput.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/globalization/jquery.global.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxscrollbar.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxpanel.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxtabs.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxmenu.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxdata.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxgrid.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxgrid.selection.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxgrid.columnsresize.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxgrid.pager.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxgrid.sort.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxgrid.filter.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxdropdownlist.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxlistbox.js" type="text/javascript"></script>
<script src="includes/js/jqwidgets/jqxinput.js" type="text/javascript"></script>
<script src="includes/js/inc.account.js" type="text/javascript"></script>

And in the BODY of the document:

<div id='jqxTabs' style="border-width: 0; font-size: 11px">
    <ul>
        <li>Tab1</li>
        <li>Tab2</li>
        <li>Tab3</li>
        <li>Tab4</li>
        <li>Tab5</li>
    </ul>
    <div style="color: #848484; font-size: 11px"><?php include('inc.tab1.php'); ?></div>
    <div style="color: #848484; font-size: 11px"><?php include('inc.tab2.php'); ?></div>
    <div style="color: #848484; font-size: 11px"><?php include('inc.tab3.php'); ?></div>
    <div style="color: #848484; font-size: 11px"><?php include('inc.tab4.php'); ?></div>
    <div style="color: #848484; font-size: 11px"><?php include('inc.tab5.php'); ?></div>
</div>

The PHP includes are HTML forms that include this as the save button:

<input type="button" id="saveButton1" name="saveButton1" value="Save" class="jqx-rc-all jqx-button jqx-widget jqx-fill-state-normal" />

[DimitarParticipant]

Hi cspafford,

Now that there are multiple forms, please make sure each one has its own validator and validation rules (remember to check the ids of the forms and the input fields).

We also recommend using the latest version of jQWidgets (2.8.1).

Best Regards,
Dimitar

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

[DimitarParticipant]

Hi cspafford,

Something more on the matter – the type of the button should be submit, not button:

<input type="submit" id="saveButton1" name="saveButton1" value="Save" class="jqx-rc-all jqx-button jqx-widget jqx-fill-state-normal" />

Best Regards,
Dimitar

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

[cspaffordMember]

Changing the button type from “button” to “submit” worked perfectly!! All is good now.

[Author]

Posts