Question

bootstrap是否有像ASP.NET这样的验证组选项来验证提交时的表单？

我有一个页面，我希望用户在主窗体上提交信息或单击另一个按钮，并有一个模式弹出窗口供用户提交第二组数据。当我这样做时，它会尝试验证这两组信息，但我只希望它验证他们选择的信息集。

以下是显示此问题的代码示例。用户应该发送到地址或通过模式添加新地址。目前它验证所有地址字段，但我只想要主窗体上的那个或模态上的那个。

    <form>


<div class="col-sm-12">
    <div class="form-group row">
        <label for="cbSaveAddress" class="col-sm-2 col-form-label">Save Address:</label>
        <div class="col-sm-6">
            <input id="cbSaveAddress" type="checkbox" name="cbSaveAddress"/>                   
        </div>
        <div class="col-sm-4 col-form-label text-danger">&nbsp;</div>                      
    </div>
    <div class="form-group row">
        <label for="txtAddress" class="col-sm-2 col-form-label">Address:</label>
        <div class="col-sm-6">
            <input name="txtAddress" type="text" id="txtAddress" class="form-control" placeholder="Address" required="required" />       
        </div>
        <div class="col-sm-4 col-form-label text-danger">
            <span>*</span>
        </div>
    </div>

    <div class="form-group row">
        <div class="col-sm-offset-2 col-sm-10">
            <input type="submit" name="btnSend" value="Send"  id="btnSend" class="btn btn-primary btn-xs" />      
        </div>
    </div>
</div>

<div class="col-sm-12">
               <input type="button" name="btnAddNewAddress" value="Add New Address" id="btnAddNewAddress" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#modalAddAddress" /
</div>
</div>

<div class="modal fade" id="modalAddAddress" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add Address</h4>
            </div>
            <div class="modal-body">
                <p>
                    <div class="col-sm-12">
                        <div class="form-group row">
                            <label for="txtAddAlias" class="col-sm-2 col-form-label">Alias:</label>
                            <div class="col-sm-6">
                                <input name="txtAddAlias" type="text" id="txtAddAlias" class="form-control" placeholder="Address" required="required" />       
                            </div>
                            <div class="col-sm-4 col-form-label text-danger">
                                <span>*</span>          
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group row">
                            <label for="txtAddAddress" class="col-sm-2 col-form-label">Address:</label>
                            <div class="col-sm-6">
                                <input name="txtAddAddress" type="text" id="txtAddAddress" class="form-control" placeholder="Address" required="true" />       
                            </div>
                            <div class="col-sm-4 col-form-label text-danger">
                                <span>*</span>
                            </div>
                        </div>
                    </div>
                </p>
            </div>
            <div class="modal-footer">
            <button type="submit" class="btn btn-danger">Submit</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

</form>

Here is a jsfiddle example

我已经想出如果我创建2个表单（在模态之前关闭第一个表单然后在模态周围打开第二个表单）它按我想要的那样工作。不幸的是，我继承的包装器使这有点具有挑战性，所以我想看看是否有类似验证组的地方，我可以设置控件与哪个按钮相关联。

Example with multiple forms

由于

引导验证组

0 个答案: