Я застрял между плагинами jQuery в Joomla. Я использую два плагина вместе, и теперь я не понимаю, как его использовать. Я использую следующие два плагина.
- Плагин jQuery Validator
- плагин jQuery UI
У меня есть три формы, которые я связал с вкладками пользовательского интерфейса. Все три формы на трех вкладках отображаются успешно.
Теперь на первой вкладке я использовал jQuery Validator таким образом, что если форма проверена, то она передается (через Ajax) и вторая вкладка открывается автоматически, это прекрасно работает.
Но на этой второй вкладке я также хочу проверить эту форму таким образом, чтобы при проверке второй формы автоматически открывалась третья вкладка, в противном случае она останавливается на второй вкладке и предлагает пользователю заполнить необходимые поля формы.
Теперь я не могу применить проверку формы к форме, которая находится на второй вкладке.
Я пишу весь код JavaScript в отдельном файле, property.js. Для первой формы мне нужно добавить еще один файл JavaScript для второй вкладки или мы можем создать другой экземпляр validator для второй формы в этом файле JavaScript?
Вот мой код,
/ администратор / компонент / com_property / просмотров / 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 > </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();
});
});
/ администратор / компонент / com_property / просмотров / 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> </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>