我被困在Joomla的jQuery插件中。我一起使用两个插件，现在我不明白如何使用它。我正在使用以下两个插件。
我有三个表单，我已经使用UI标签。三个选项卡上的所有三个表单都已成功显示。
现在在第一个选项卡上我使用jQuery Validator，如果表单被验证，那么它被提交（通过Ajax）并且第二个选项卡自动打开，这很好。
但是在第二个选项卡上，我还要验证该表单，如果验证了第二个表单，则第三个选项卡将自动打开，否则它将停止在第二个选项卡上，并提示用户填写所需的表单字段。
现在我无法在第二个标签页上的表单上应用表单验证。
我将所有JavaScript代码都写在一个单独的文件property.js中。对于第一个表单，我是否需要为第二个选项卡添加另一个JavaScript文件，还是可以为该JavaScript文件的第二个表单创建另一个validator实例？
这是我的代码，
<?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 > </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文件，
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();
});
});
<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> </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>
答案 0 :(得分：1)
尝试为每个表单添加一个唯一的ID，并为每个表单添加验证器。 例如：
jQuery("#addPropertyForm1").validate();
jQuery("#addPropertyForm2").validate();
jQuery("#addPropertyForm3").validate();