Hello All,
i need urgent help, actually i m stuck between jQuery plugins in JOOMLA, i m using two plugins together and now don't understand how to use it... follwing two plugin i m using
- jQuery Validator plugin
- jQuery UI tab plugin
now what i do.. i have 3 forms that i have attatched with UI tabs. all 3 forms on 3 tabs displaying successfully.
now on first tab i used jquery validator in such a manner that if form is validated then it is submited ( via ajax ) and 2'nd tab opened automatically,this works fine.
but on this 2'nd tab i also want to validate that form in a manner that if 2'nd form is validated then 3'rd tab opens automaically otherwise it stops on 2'nd tab and promt the user to fill required form fields.
now i m unable to apply form validation on the form which is on 2'nd tab.
i write all js code in separte file (property.js) for the first form ,do i need to add another js file for 2'nd tab or can we create another instance of validator for 2nd form on that js file . please describe me
here is my code
/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 > </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 -->
this is js file
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> </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>