该页面有2个引导程序表单。填充数据和表格的一种形式从插入的数据中填充。当用户单击其中一个表行时,将显示另一个,以编辑详细信息。 第一种形式的验证工作完美。但第二个没有。
这是我的代码;
表单1:
axis
表格2:
<form class="form" id="asset_details_form" action="">
<div class="modal-body">
<div class="form-group row">
<div class="col-sm-3">
<label for="asset_name" class="control-label">Item Name</label>
</div>
<div class="col-sm-9">
<input type="text" id="asset_name" name="asset_name" class="form-control" autofocus>
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">
<label for="asset_description" class="control-label">Item Description</label>
</div>
<div class="col-sm-9">
<textarea style="resize: vertical;" type="text" id="asset_description" name="asset_description" class="form-control"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">
<label for="asset_quantity" class="control-label">Required Quantity</label>
</div>
<div class="col-sm-9">
<input type="number" step="1" min="1" value="1" id="asset_quantity" name="asset_quantity" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">
<label for="asset_estimated_cost" class="control-label">Estimated Cost</label>
</div>
<div class="col-sm-9">
<input type="number" step=".01" min="0" value="0.00" id="asset_estimated_cost" name="asset_estimated_cost" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">
<label for="asset_required_date" class="control-label">Required Date</label>
</div>
<div class="col-sm-9">
<input type="date" id="asset_required_date" name="asset_required_date" class="form-control">
</div>
</div>
</div>
<!-- Modal Buttons -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn btn-primary" id="save_asset">Save</button>
</div>
</form>
验证脚本1:
<form class="form" id="asset_edit_form" action="">
<div class="modal-body">
<div class="form-group row">
<div class="col-sm-3">
<label for="asset_edit_name" class="control-label">Item Name</label>
</div>
<div class="col-sm-9">
<input type="text" id="asset_edit_name" name="asset_edit_name" class="form-control" autofocus>
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">
<label for="asset_edit_description" class="control-label">Item Description</label>
</div>
<div class="col-sm-9">
<textarea style="resize: vertical;" type="text" id="asset_edit_description" name="asset_edit_description" class="form-control"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">
<label for="asset_edit_quantity" class="control-label">Required Quantity</label>
</div>
<div class="col-sm-9">
<input type="number" step="1" min="1" value="1" id="asset_edit_quantity" name="asset_edit_quantity" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">
<label for="asset_edit_estimated_cost" class="control-label">Estimated Cost</label>
</div>
<div class="col-sm-9">
<input type="number" step=".01" min="0" value="0.00" id="asset_edit_estimated_cost" name="asset_edit_estimated_cost" class="form-control">
</div>
</div>
<div class="form-group row">
<div class="col-sm-3">
<label for="asset_edit_required_date" class="control-label">Required Date</label>
</div>
<div class="col-sm-9">
<input type="date" id="asset_edit_required_date" name="asset_edit_required_date" class="form-control">
</div>
</div>
</div>
<!-- Modal Buttons -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="save_edit">Save</button>
<button type="button" class="btn btn-danger" id="delete_asset">Delete</button>
</div>
</form>
})
验证脚本2:
$('#save_asset').click(function () {
$('#asset_details_form').validate({
debug: true,
rules: {
asset_name: 'required',
asset_description: 'required',
asset_quantity: {
required: true,
number: true,
min: 1
},
asset_estimated_cost: {
required: true,
number: true,
min: 1
},
asset_required_date: {
required: true,
date: true
}
},
messages: {
asset_name: 'Please enter asset name.',
asset_description: 'Please enter description.',
asset_quantity: {
required: 'Please enter the quantity.',
number: 'Quantity should only contain numerical values.'
},
asset_estimated_cost: {
required: 'Please enter the estimated cost.',
number: 'Cost should only contain numerical values.'
},
asset_required_date: {
required: 'Please enter the required date. YYYY-MM-DD',
date: 'Enter date as YYYY-MM-DD'
}
},
submitHandler: function () {
addAsset()
}
})
})
答案 0 :(得分:-1)
您是否动态生成第二种形式?
在那种情况下
$(document).on('submit','#your_form_id', function(){
// your code here.
});
应该有效。您无法直接处理动态生成javascript的内容。