您好我在动态选择框上验证时遇到问题。 Jquery验证不会验证动态选择框的其余部分而不是现有的动态选择框。 注意到我正在使用CakePHP 2.5，Bootstrap 3和Jquery验证。
以下是我的代码。
HTML
<?php echo $this->Form->create('Redemption',array('type'=>'file','id'=>'redeemForm')); ?>
<div class="form-group">
<div class="row" id="proRow_0">
<div class="col-md-4">
<label>Product Purchased</label>
<?php echo $this->Form->input('Product.0.type_id',array('class'=>'form-control product-select','id'=>'product_0','label'=>false,'empty'=>array(''=>'Choose Product'),'div'=>false));?>
</div>
</div>
</div>
<div id="moreProduct"></div>
<a id="add"><i class="fa fa-plus-circle"></i> Add More</a>
<a id="remove"><i class="fa fa-minus-circle"></i> Remove</a>
的Javascript
$('#add').on('click', function(event) {
event.preventDefault();
rmBtn.show();
var productRow = $('#moreProduct');
$.get('<?php echo $this->webroot;?>/redemptions/getProductType.json', function(data) {
var proRow = 'proRow_'+index;
var modelID = 'model_'+index;
var quantityID = 'quantity_'+index;
var newPRow = '<div class="row moreProduct" id="'+proRow+'">';
newPRow += '<div class="col-md-4 product-type-field">';
newPRow += '<select class="form-control product-select" name="data[Product]['+index+'][type_id]" id="product_'+index+'">';
newPRow += '<option>Choose Product</option>';
$.each(data,function(key, val) {
newPRow += "<option value=\""+key+"\">"+val+"</option>";
});
newPRow += '</select></div><div class="col-md-4 product-model-field" id="'+modelID+'"></div><div class="col-md-4 product-quantity-field" id="'+quantityID+'"></div>';
productRow.append(newPRow);
var productTfield = $('.product-type-field');
var productMfield = $('.product-model-field');
var productQfield = $('.product-quantity-field');
//assign new style
$('#moreProduct').css({'margin-top': '-10px'});
productTfield.css({'margin-top': '10px'});
productMfield.css({'margin-top': '10px'});
productQfield.css({'margin-top': '10px'});
$('select[name*="type_id"]').each(function() {
$(this).on('change', function(event) {
event.preventDefault();
var proID = $(this).val();
var modelID = $(this).attr('id').substring(8);
var quantityID = $(this).attr('id').substring(8);
var modelID = $('#'+proRow).find($('#model_'+modelID)).attr('id');
var quantityID = $('#'+proRow).find($('#quantity_'+quantityID)).attr('id');
if (modelID) {
var productMfield = $('div[id^="'+modelID+'"]');
var productQfield = $('div[id^="'+quantityID+'"]');
$.post("<?php echo $this->webroot;?>/redemptions/getProductModel.json",{proID : proID}).done(function(data){
productMfield.html("");
var modelVal = modelID.substring(6);
var quantityVal = quantityID.substring(9);
var modelSelect = '<select class="form-control model-select" name="data[Product]['+modelVal+'][model_id]">';
$.each(data,function(key, val) {
modelSelect += "<option value=\""+val.Product.id+"\">"+val.Product.product_model+"</option>";
});
modelSelect += '</select>';
productMfield.append(modelSelect);
productQfield.html();
var newQuantity = '<input type="text" class="form-control quantity" placeholder="Quantity" id="qval_'+quantityVal+'"name="data[Product]['+modelVal+'][quantity]">';
productQfield.append(newQuantity);
quantityID = $('#'+proRow).find($('#qval_'+quantityVal)).attr('id');
quantityID = $('#'+quantityID);
qListener(quantityID);
});
}else{
existFieldListener();
};
});
});
});
index++;
});
function formValidation(){
$.validator.setDefaults({
highlight: function (element, errorClass, validClass) {
// console.log(element.type);
// console.log(this.findByName(element.name));
if (element.type == 'radio') {
this.findByName(element.name).addClass(errorClass).removeClass(validClass);
} else if(element.type == 'select-one'){
console.log('yes');
console.log(errorClass);
console.log($('select-one'));
$('select-one').each(function() {
$(this).removeClass('has-success has-feedback').addClass('has-error has-feedback');
});
// $(element).closest('.product-type-field').removeClass('has-success has-feedback').addClass('has-error has-feedback');
}else if(element.name == 'data[Redemption][retailer_id]'){
$(element).closest('.form-group').find('i.fa').remove();
}else {
$(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
$(element).closest('.form-group').find('i.fa').remove();
}
},
unhighlight: function (element, errorClass, validClass) {
if (element.type === "radio") {
this.findByName(element.name).removeClass(errorClass).addClass(validClass);
} else {
$(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
$(element).closest('.form-group').find('i.fa').remove();
}
}
});
$.validator.addMethod("accept", function(value, element, param) {
return value.match(new RegExp("." + param + "$"));
});
$('#redeemForm').validate({
debug:true,
ignore: '*:not([name])',
submitHandler: function(form) {
form.submit();
},
accept: function(value, element, param) {
return value.match(new RegExp("." + param + "$"));
},
rules: {
"data[Redemption][date_purchased]":{
required:true,
},
"data[Redemption][invoice_no]":{
required:true,
},
"data[Customer][customer_name]":{
required:true,
},
"data[Product][0][type_id]":{
required:true,
},
"data[Customer][primary_address]":{
required:true,
},
"data[Customer][nric_no]":{
required:true,
accept:"[a-zA-Z0-9]+",
},
"data[Redemption][invoice]":{
required:true,
},
"data[Customer][customer_email]":{
required:true,
email:true,
},
"data[Customer][contact_no]":{
required:true,
number: true
},
"data[Customer][city]":{
required :true,
accept: "[a-zA-Z]+",
},
"data[Customer][postal_code]":{
required :true,
accept: "[0-9]+",
},
"data[Customer][state]":{
required :true,
},
},
messages:{
"data[Customer][customer_email]":{
email: "Your email address must be in the format of name@domain.com"
},
"data[Customer][contact_no]":{
number: "Your contact must be in the format of 03xxxxxx/019xxxxxx"
},
"data[Customer][city]":{
accept:"Accept letter only"
},
"data[Customer][postal_code]":{
accept:"Accept number only"
},
"data[Customer][nric_no]":{
accept:"NRIC no. must be in in the format of 123456xxxxxx without '-'"
}
},
setDefaults: {
ignore: ":hidden:not(select)",
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else if (element.is('#retailers')) {
error.insertAfter(element.siblings(".chzn-container"));
} else {
error.insertAfter(element);
}
},
});
$('#redeemForm').on('submit', function() {
$(this).validate();
// $('input').each(function () {
// $(this).rules('add', {
// required: true,
// });
// });
$('select[name*="type_id"]').each(function() {
// console.log($(this));
$(this).rules('add',{
required:true,
});
});
});
}
非常感谢您的帮助和时间。感谢