bootstrapValidator 当form Button为手动提交时 怎么配合 bootstrapValidator 完成FORM ajax数据提交并且页面不跳转

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("错误!!");
                    }
                });
            }  
        });

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值