在多个Bootstrap Modals中验证多个表单

时间:2018-04-14 09:16:39

标签: javascript jquery jquery-validate

该页面有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()
  }
})

})

1 个答案:

答案 0 :(得分:-1)

您是否动态生成第二种形式?

在那种情况下

$(document).on('submit','#your_form_id', function(){
   // your code here.
});

应该有效。您无法直接处理动态生成javascript的内容。