I have jQuery validation on many forms. The problem is that on some of the form the validation does not work, yet the same code is used. I have spent many hours and cannot see what is wrong with the code. They both get loaded in by ajax.
Here is a form that the validation does not work on:
<div id="form_box">
<?php echo $this->Form->create('Room');?>
<?php echo $this->Form->input('id');?>
<div id="form_tabs" class="column span-17">
<ul>
<li><a href="#form_tabs-1">Room</a></li>
<li><a href="#form_tabs-2">Description</a></li>
<li><a href="#form_tabs-3">Rates</a></li>
<li><a href="#form_tabs-4">Attached Images</a></li>
</ul>
<div id="form_tabs-1">
<?php
echo $this->Form->input('title',array('class'=>'form_input'));
echo $this->Form->input('enabled',array('class'=>'form_input'));
//echo $this->Form->input('no_of_rooms',array('class'=>'form_input'));
?>
<div class="input text"><label for="RoomListNo">Display Order</label>
<?
echo $res->getNumDrop(10, null, $this->data['Room']['list_no'], 'RoomListNo','data[Room][list_no]');
?>
</div>
<hr />
<?php
echo $this->Form->input('min_adults',array('class'=>'form_input'));
echo $this->Form->input('max_adults',array('class'=>'form_input'));
echo $this->Form->input('max_children',array('class'=>'form_input'));
?>
</div>
<div id="form_tabs-2">
<?php echo $this->Form->input('description');?>
</div>
<div id="form_tabs-3">
<h3>Related Rates</h3>
<?php
//echo $this->Form->input('AddOn',array('class'=>''));
echo $this->Form->input('Rate',array('class'=>'multiselect','label'=>false));
?>
</div>
<div id="form_tabs-4">
<div id="uploader"></div>
<div class="boxgrid grid_8">
<?php echo $this->element('attachments',array('control'=>'rooms','id'=>$this->data['Room']['id'],'att'=>$this->data['Attachment'])); ?>
</div>
<hr />
</div>
</div>
<?php echo $this->element('form_col'); ?>
</form>
</div>
<div id="error_msg"></div>
<script type="text/javascript">
$(document).ready(function() {
$("div#uploader").resloader();
$("div#uploader").load('<?=BASE_URL?>/admin/rooms/addfiles/<?=$this->data['Room']['id']?>',null,function(){}).fadeIn();
$(".multiselect").multiselect();
// validate form on keyup and submit
$("#RoomEditForm").validate({
rules: {
'data[Room][title]': {required: true, minlength: 3, maxlength:32 },
'data[Rate][Rate][]': {required: true},
'data[Room][max_adults]': {required: true, digits: true, minlength: 1, maxlength:2 },
'data[Room][max_children]': {required: true, digits: true, minlength: 1, maxlength:2 }
},
messages: {
'data[Room][title]': {required: "Please Enter a Room title"},
'data[Rate][Rate][]': {required: "Please select at least one Rate"},
'data[Room][max_adults]': {required: "Max Adults must be numeric "},
'data[Room][max_children]': {required: "Max Children must be numeric "}
},
errorPlacement: function(error, element) {
$('#error_msg').html(error);
}
});
});
</script>
Here is a form that the validation is working correctly:
<div id="form_box">
<?php echo $this->Form->create('AddOn', array('id'=>'AddOnEditForm','url'=>'/admin/upgrades/edit'));?>
<?php echo $this->Form->input('id');?>
<div id="form_tabs" class="column span-17">
<ul>
<li><a href="#form_tabs-1">Add On</a></li>
<li><a href="#form_tabs-2">Description</a></li>
<li><a href="#form_tabs-3">Dates</a></li>
<li><a href="#form_tabs-4">Related Data</a></li>
<li><a href="#form_tabs-5">Attached Images</a></li>
</ul>
<div id="form_tabs-1">
<?php
echo $this->Form->input('title',array('class'=>'form_input'));
echo $this->Form->input('price',array('class'=>'form_input'));
?>
<div class="input text"><label for="AddOnPriceQuoteAs">Price Quote As</label>
<?php
echo $res->getPriceQuoteDrop($this->data['AddOn']['price_quote_as'],'AddOnPriceQuoteAs','data[AddOn][price_quote_as]');
?>
</div>
<hr />
<?php
echo $this->Form->input('add_on_category_id',array('class'=>'form_input','label'=>'Category'));
echo $this->Form->input('enabled',array('class'=>'form_input'));
?>
<div class="input text"><label for="AddOnListNo">Display Order</label>
<?
echo $res->getNumDrop(10, null, $this->data['AddOn']['list_no'], 'AddOnListNo','data[AddOn][list_no]');
?>
</div>
</div>
<div id="form_tabs-2">
<?php echo $this->Form->input('description');?>
</div>
<div id="form_tabs-3">
<div class="input select">
<label for="AddOnAvailabilityDrop">Availability</label>
<?
echo $res->getAvailabilityDrop($this->data['AddOn']['availability'],'AddOnAvailabile','data[AddOn][available][]');
?>
</div>
<div class="input text">
<label for="AddOnValidFrom">Valid From</label>
<input id="AddOnValidFrom" class="form_input form_datepicker" name="data[AddOn][valid_from]"
type="text" value="<?=$this->data['AddOn']['valid_from']?>" />
</div>
<div class="input text">
<label for="AddOnValidTo">Valid To</label>
<input id="AddOnValidTo" class="form_input form_datepicker" name="data[AddOn][valid_to]"
type="text" value="<?=$this->data['AddOn']['valid_to']?>" />
</div>
</div>
<div id="form_tabs-4">
<h3>Relates to these Rate+Room combinations:</h3>
<?php
foreach($this->data['AddOnRateroom'] as $rr){
?>
<strong>Rate:</strong> <?=$rates[$rr['rate_id']]?> +
<strong>Room:</strong> <?=$rooms[$rr['room_id']]?> (<a href="<?=BASE_URL?>/admin/upgrades/delraterooms/<?=$this->data['AddOn']['id']?>/rate:<?=$rr['rate_id']?>/room:<?=$rr['room_id']?>">x</a>)<br />
<?
}
if (count($this->data['AddOnRateroom'])==0){ echo 'No Rate+Room Combinations';}
?>
<br /><br /><br />
<h3>add New Rate+Room Combination</h3>
<select id="AddOnRates" name="data[Addon][RR][rate]">
<option vlaue="">Choose Rate...</option>
<? foreach($rates as $rid=>$rate){ ?>
<option value="<?=$rid?>"><?=$rate?></option>
<? } ?>
</select>
<div id="roomloader"></div>
<p class="buttons"><a id="gorr" style="display:none" href="<?=BASE_URL?>/admin/upgrades/addraterooms/<?=$this->data['AddOn']['id']?>">GO</a></p>
</div>
<div id="form_tabs-5">
<div id="uploader"></div>
<?php echo ($this->data['AddOn']['id']);?>
<div class="boxgrid grid_8">
<?php echo $this->element('attachments',array('control'=>'upgrades','id'=>$this->data['AddOn']['id'],'att'=>$this->data['Attachment'])); ?>
</div>
<hr />
</div>
</div>
<?php echo $this->element('form_col'); ?>
<? //debug($this->data);?>
</form>
</div>
<div id="error_msg"></div>
<script type="text/javascript">
$(document).ready(function() {
$("div#uploader").resloader();
$("div#uploader").load('<?=BASE_URL?>/admin/upgrades/addfiles/<?=$this->data['AddOn']['id']?>',null,function(){}).fadeIn();
/* JQuery Datepicker */
$('.form_datepicker').datepicker({
dateFormat: 'yy-mm-dd'
});
$('#AddOnRates').change(function(){
var rid = $(this).val();
var gotohref = '<?=BASE_URL?>/admin/upgrades/getraterooms/'+rid;
$("div#roomloader").resloader();
$("div#roomloader").load(gotohref,null,function(){}).fadeIn();
return false;
});
// validate form on keyup and submit
$("#AddOnEditForm").validate({
rules: {
'data[AddOn][title]': {required: true, minlength: 3, maxlength:32 },
'data[AddOn][price]': {required: true, number: true},
'data[AddOn][valid_from]': {required: true, date: true},
'data[AddOn][valid_to]': {required: true, date: true},
'data[AddOn][available][]': {required: true},
},
messages: {
'data[AddOn][title]': {required: "Please Enter a Rate title"},
'data[AddOn][price]': {required: "Price must be numeric "},
'data[AddOn][valid_from]': {required: "Please enter a valid Date From"},
'data[AddOn][valid_to]': {required: "Please enter a valid Date To "},
'data[AddOn][available][]': {required: "Please select at least one Availability Day"},
},
errorPlacement: function(error, element) {
$('#error_msg').html(error);
}
});
});
</script>
The difference seems to be the form creation instruction
against
Seems you’re not passing the id for the form that is used by jquery validator. The form creation should be: