如何一起使用 jQuery 验证器和 jQuery UI Tab？

Question

我被 Joomla 中的 jQuery 插件困住了。我正在同时使用两个插件，现在我不明白如何使用它。我正在使用以下两个插件。

• jQuery 验证器插件
• jQuery UI 选项卡插件

我有三个带有 UI 选项卡的表单。三个选项卡上的三个表单都显示成功。

现在在第一个选项卡上，我使用 jQuery Validator 的方式是，如果表单经过验证，则提交（通过 Ajax）并自动打开第二个选项卡，这可以正常工作。

但在第二个选项卡上，我还想验证该表单，如果第二个表单被验证，则第三个选项卡会自动打开，否则它会在第二个选项卡上停止并提示用户填写所需的表单字段。

现在我无法对第二个选项卡上的表单应用表单验证。

我将所有 JavaScript 代码写在一个单独的文件中，property.js。对于第一个表单，我需要为第二个选项卡添加另一个 JavaScript 文件，还是我们可以在该 JavaScript 文件上为第二个表单创建另一个 validator 实例？

这是我的代码，

/administrator/component/com_property/views/addproperty/tmpl/default.php

<?php
    $document->addScript($mask_js);
    $document->addScript($property_js);
    $document->addScript($form_js);
    $document->addScript($widget_js);
    $document->addScript($tab_js);
?>
<style type="text/css">
    .ui-tabs .ui-tabs-hide { display: none; }
</style>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Basic</a></li>
        <li><a href="?option=com_property&view=contact_detail&format=raw">Contact</a></li>
        <li><a href="?option=com_property&view=xtrafeatures&format=raw">Features</a></li>
        <li><a href="?option=com_property&view=upload_images&format=raw">Images</a></li>
    </ul>
    <div id="tabs-1">
        <fieldset >
            <form name="addPropertyForm" id="addPropertyForm" action="" method="POST" >
                <table border="0" width="100%" cellpadding="5" cellspacing="5">
                    <tr>
                      <td ><label for="propTitle"><sup>*</sup>Property Title:</label></td>
                      <td ><input type="text" name="propTitle" id ="propTitle"  size="47"></td>
                    </tr>
                    <tr>
                        <td ><label for="prop_type_id"><sup>*</sup>Property Type:</label></td>
                        <td>
                            <select name="prop_type_id" id="prop_type_id" title="Please select Type" validate="required:true" >
                              <option value="">-Select-</option>
                              <option value="0000000001" > Apartment </option>
                              <option value="0000000013" > Commercial </option>
                              <option value="0000000018" > Cottage </option>
                              <option value="0000000019" > Development land </option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td ><label for="address1"><sup>*</sup>Address line 1:</label></td>
                        <td ><input type="text" name="address1" id="address1" size="47" ></td>
                    </tr>
                    <tr>
                        <td ><label for="price"><sup>*</sup>Price :</td>
                          <td ><input type="text" name="price" id="price" size="47"></td>
                    </tr>
                    <tr>
                        <td >&nbsp;</td>
                        <td align="left">
                            <input type="submit" value="Add" name="doAction" class="submit"  />
                        <input type="reset"  value="Clear" name="Clear" class="submit" id="clear"/>
                        </td>
                    </tr>
                </table>
                <input type='hidden' value='com_property' name='option' />
                <input type='hidden' value='property' name='controller' />
                <input type='hidden' value='storeProperty' name='task' />
                <input type="hidden" name="<?php echo JUtility::getToken(); ?>" value="1" />
            </form>
        </fieldset>
    </div><!--end of tab 1-->
</div> <!-- end of #tabs -->

---

这是 JavaScript 文件，

property.js

jQuery.noConflict();
jQuery.metadata.setType("attr", "validate");
jQuery(function () {
    jQuery("#tabs").tabs({
            cache: false,
            ajaxOptions: {
                error: function(xhr, status, index, anchor) {
                    jQuery(anchor.hash).html("<p style='padding:10px'>This Tab is Under Construction</p>");
                }
            }
    }).bind('tabsload', function(event, ui) {
        console.log(ui.index);
    });

    var validator = jQuery("#addPropertyForm").validate({
        debug:true,
        rules: {
            propTitle: {
                required: true,
                minlength: 2
            },
            address1: {
                required: true
            },
            price: {
                required: true
            }
        },
        messages: {
            propTitle: {
                required: "Please write Title",
                minlength: "Property name must consist of at least 2 characters"
            },
            address1: {
                required: "Please write Address"
            },
            price: {
                required: "Please mention Price"
            }
        },
        submitHandler: function(form) {
            jQuery(form).ajaxSubmit();
            jQuery("#tabs").tabs( 'select',1);
            jQuery(form).resetForm();
            return false;
           }
    });

    jQuery('#clear').click ( function () {
        validator.resetForm();
    });
});

---

/administrator/component/com_property/views/contact_detail/tmpl/default.php

<fieldset >
    <form name="propertyContactForm" id="propertyContactForm" action="" method="POST" >
        <table border="0" width="100%" cellpadding="5" cellspacing="5">
            <tr>
                <td><label for="contact_office"><sup>*</sup>Contact Office:</label></td>
                <td ><input type="text" name="contact_office" id="contact_office" size="47">
                </td>
            </tr>
            <tr>
                <td align="right" ><label for="contact_number"><sup>*</sup>Contact Number:</label></td>
                <td align="left" valign="top">
                    <input type="text" name="contact_number" id="contact_number">
                </td>
            </tr>
            <tr>
                <td ><label for="contact_person"><sup>*</sup>Contact Person:</label></td>
                <td align="left" valign="top">
                    <input type="text" name="contact_person" id="contact_person" size="47">
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>
                    <input type="submit" value="<?php echo $this->title_text; ?>" name="submitContact" class="submit" id="submitContact" />
                    <input type="button" name="Back" onclick="javascript:history.go(-1)" value="Back" />
                </td>
            </tr>
        </table>
        <input type='hidden' value='com_property' name='option' />
        <input type='hidden' value='property' name='controller' />
        <input type='hidden' value='StorePropertyContacts' name='task' />
        <input type="hidden" name="<?php echo JUtility::getToken(); ?>" value="1" />
    </form>
</fieldset>

Answer 1

尝试为您的每个表单提供一个唯一的 ID，并为每个表单添加验证器。 例如：

jQuery("#addPropertyForm1").validate();
jQuery("#addPropertyForm2").validate();
jQuery("#addPropertyForm3").validate();