1、在HTML的FORM表单中设置BUTTON的type为BUTTON
<form role="form" id="add_address_form" action="<{:url('Address/add_address')}>" method="post">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>地址名称</label>
<input type="text" class="form-control" name="address_name" >
<input type="hidden" name="__token__" value="<{$Request.token}>">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>选择客户区域(省)</label> <!--i_customer_contact_region -->
<select name="provinceid" id="" class="form-control">
<option value="0">请选择...</option>
<{volist name = 'provinces', id='provinces_list'}>
<option value="<{$provinces_list.provinceid}>"><{$provinces_list.province}></option>
<{/volist}>
<option value="44444">未知</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label>市</label>
<select name="cityid" id="" class="form-control">
<option value="0">请选择...</option>
</select>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label>区、县</label>
<select name="areaid" id="" class="form-control">
<option value="0">请选择...</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>客户详细地址</label>
<input type="text" class="form-control" name="address_detail">
</div>
</div>
</div>
<div>
<button class="btn btn-sm btn-primary m-t-n-xs" id="add_address_btn" type="button"><strong>添加保存</strong></button>
</div>
</form>
2、初始化bootstrapValidator
$(document).ready(function(){
//创建客户信息表单验证
$('#add_address_form').bootstrapValidator({
live: 'disabled',
message: '这是一个无效的值',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
address_name: {
validators: {
notEmpty: {
message: '地址名称字段值不能为空!'
},
stringLength: {
min: 1,
max: 50,
message: '地址名称必须在2个到50个字符之间!'
}
}
}
}
});
});
3、注册提交按钮事件
//提交表单数据
$('#add_address_btn').click(function(event) {
/* Act on the event */
/*手动验证表单,当是普通按钮时。*/
$('#add_address_form').data('bootstrapValidator').validate();//启用验证
var flag = $('#add_address_form').data('bootstrapValidator').isValid()//验证是否通过true/false
if(flag){
//获取表单数据
var formData = new FormData(document.getElementById("add_address_form"));
$.ajax({
url:getProjectPath()+'/address/add_address',
type:"post",
data:formData,
processData:false,
contentType:false,
success:function(data){
var selectAddress = $('#select_address');
selectAddress.prepend('<option value="'+data.data.address_number+'">'+data.data.address_name+'</option>');
selectAddress.find("option").first().attr("selected", true);
$("#create_address").modal('hide');
},
error:function(e){
alert("错误!!");
}
});
}
});