模态对话框验证ASP.NET / bootstrap

Question

我一直试图在模态对话框中验证一些控件，现在，尽管所有示例和其他帖子都在这里，但我似乎无法让它工作......

在我的网页中，我有一个打开模态对话框的按钮。该模态对话框有三个必需的输入框：一个用于文本，两个用于正数值。我希望在用户使用花式引导反馈方案单击保存时验证输入，如下例所示：

http://formvalidation.io/examples/modal/

http://1000hz.github.io/bootstrap-validator/

如果输入有效，那么我将采取相应的值并进行处理。我没有这么远。模态目前正在打开。

我知道这些示例使用表单，但由于我使用的是母版页，因此不允许在我的内容页面中使用嵌套表单。 那么当用户点击保存时，如何验证输入并将反馈样式应用于无效控件？

<!-- Button to trigger modal -->
<button type="button" id="btnOpenModal" class="btn btn-info" data-toggle="modal" data-target="#myModal">Add</button>

<!-- Bootstrap Modal Dialog -->
<div class="modal fade" id="myModal" data-toggle="validator" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Here is the modal dialog</h4>
            </div>
            <div id="loginForm" class="modal-body form-horizontal">
                <h5>Describe what to do here...</h5>
                <div class="form-inline form-group">
                    <label for="mdltxtId" class="col-sm-3 control-label">Description</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="mdltxtId" name="mdltxtId" placeholder="item description" />
                    </div>
                </div>
                <div class="form-inline form-group">
                    <label for="mdltxtWgt" class="col-sm-3 control-label">Weight (LB)</label>
                    <div class="col-sm-9">
                        <input type="text" pattern="^[0-9]{1,}" title="Positive number only" class="form-control" id="mdltxtWeight" name="mdltxtWeight" placeholder="weight in pounds" />
                    </div>
                </div>
                <div class="form-inline form-group">
                    <label for="mdltxtLength" class="col-sm-3 control-label">Length (IN)</label>
                    <div class="col-sm-9">
                        <input type="text" pattern="^[0-9]{1,}" title="Positive number only" class="form-control" id="mdltxtLength" name="mdltxtLength" placeholder="length in inches" />
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <asp:Button ID="btnSave" runat="server" Text="Save" CssClass="btn btn-primary" />
                <%--<button type="submit" class="btn btn-primary">Save changes</button>--%>
            </div>
        </div>
    </div>
</div>

我可能可以将项目更改为不使用母版页来简化表格 - 这不是必需的（VS2015中的默认Web窗体项目会自动设置）。

添加...我主要是一个VB.NET winforms开发人员，所以我可能在ASP.NET和javascript上缺少很多基础知识，所以对我来说很容易。

Answer 1

使用Bootstrap Validate plugin，您无法验证<form></form>之外的输入元素。此限制没有解决方法。

表单id="Form"

<form id="Form">
<div class="modal-body form-horizontal">
    <h5>Describe what to do here...</h5>
    <div class="form-inline form-group">
        <label for="mdltxtId" class="col-sm-3 control-label">Description</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="mdltxtId" name="mdltxtId" placeholder="item description" />
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <asp:Button ID="btnSave" runat="server" Text="Save" CssClass="btn btn-primary" />
    <%--<button type="submit" class="btn btn-primary">Save changes</button>--%>
</div>
</form>

Fiddle with Form

当表单id="Form"更改为div id="Form"时，现在Bootstrap Validate plugin无法验证相同的代码。如果没有<form></form>，该插件无效。

<div id="Form" class="modal-body form-horizontal">
    <h5>Describe what to do here...</h5>
    <div class="form-inline form-group">
        <label for="mdltxtId" class="col-sm-3 control-label">Description</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="mdltxtId" name="mdltxtId" placeholder="item description" />
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <asp:Button ID="btnSave" runat="server" Text="Save" CssClass="btn btn-primary" />
    <%--<button type="submit" class="btn btn-primary">Save changes</button>--%>
</div>

Fiddle with Div

Answer 2

因为Shehary指出Bootstrap Validate插件不适用于不是表单的模式对话框。因此，为了模拟相同的效果，我在每个输入中添加了一个span标记，以提供反馈文本，并使用javascript进行验证并添加反馈样式。

这是模式：

<div class="modal fade" id="myModal" data-toggle="validator" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Here is the modal dialog</h4>
            </div>
            <div id="loginForm" class="modal-body form-horizontal">
                <h5>Describe what to do here...</h5>
                <div class="form-inline form-group">
                    <label for="mdltxtId" class="col-sm-3 control-label">Description</label>
                    <div class="col-sm-9">
                        <input type="text" pattern="^.{1,}" title="Item name required" class="form-control" id="mdltxtId" name="mdltxtId" placeholder="item description"/>                            
                        <span id="mdlIdHelper" class="help-block h6"></span>
                    </div>
                </div>
                <div class="form-inline form-group">
                    <label for="mdltxtWgt" class="col-sm-3 control-label">Weight (LB)</label>
                    <div class="col-sm-9">
                        <input type="text" pattern="^[+]?([.]\d+|\d+[.]?\d*)" title="Positive number only" class="form-control" id="mdltxtWeight" name="mdltxtWeight" placeholder="weight in pounds" />
                        <span id="mdlWgtHelper" class="help-block h6"></span>
                    </div>
                </div>
                <div class="form-inline form-group">
                    <label for="mdltxtArm" class="col-sm-3 control-label">Arm (IN)</label>
                    <div class="col-sm-9">
                        <input type="text" pattern="^[0-9]{1,}" title="Positive number only" class="form-control" id="mdltxtArm" name="mdltxtArm" placeholder="arm length in inches" />
                        <span id="mdlArmHelper" class="help-block h6"></span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>                    
                <button type="button" class="btn btn-primary" id="btnmdlSave2" onclick="CloseModal(); return false;">Save</button>
            </div>
        </div>
    </div>
</div>

这是javascript：

    function OpenModal() {
        //window.alert('opening modal');
        ResetModal();
        //window.alert('modal was reset');
        $('#myModal').modal('show');
        //window.alert('modal was opened');
    }

    function ResetModal() {
        //window.alert('beginning modal reset');
        var mdlId = $('#mdltxtId');
        var mdlWgt = $('#mdltxtWeight');
        var mdlArm = $('#mdltxtArm');

        // reset the item description input group
        mdlId.closest('.form-group').removeClass('has-error').removeClass('has-success');
        mdlId.val('');
        mdlIdHelper.innerHTML = "";

        // reset the item weight input group
        mdlWgt.closest('.form-group').removeClass('has-error').removeClass('has-success');
        mdlWgt.val('');
        mdlWgtHelper.innerHTML = "";

        // reset the arm length input group
        mdlArm.closest('.form-group').removeClass('has-error').removeClass('has-success');
        mdlArm.val('');
        mdlArmHelper.innerHTML = "";
        //window.alert('finished modal reset');
    }

    function ValidateModal() {
        var mdlId = $('#mdltxtId');
        var mdlWgt = $('#mdltxtWeight');
        var mdlArm = $('#mdltxtArm');
        var val = true

        // Check if the input is valid
        if (!mdlId.val()) {
            // Add errors highlight
            mdlId.closest('.form-group').removeClass('has-success').addClass('has-error');
            mdlIdHelper.innerHTML = "You must enter a description";
            val = false
        } else {
            // Add success highlight
            mdlId.closest('.form-group').removeClass('has-error').addClass('has-success');
            mdlIdHelper.innerHTML = "";
        }

        // Check if the input is valid
        if (!mdlWgt.val() || !$.isNumeric(mdlWgt.val()) || mdlWgt.val() <= 0) {
            // Add errors highlight
            mdlWgt.closest('.form-group').removeClass('has-success').addClass('has-error');
            mdlWgtHelper.innerHTML = "Item weight must be a positive numeric value";
            val = false;
        } else {
            // Add success highlight
            mdlWgt.closest('.form-group').removeClass('has-error').addClass('has-success');
            mdlWgtHelper.innerHTML = "";
        }

        // Check if the input is valid
        if (!mdlArm.val() || !$.isNumeric(mdlArm.val()) || mdlArm.val() <= 0) {
            // Add errors highlight
            mdlArm.closest('.form-group').removeClass('has-success').addClass('has-error');
            mdlArmHelper.innerHTML = "Arm length must be a positive numeric value";
            val = false;
        } else {
            // Add success highlight
            mdlArm.closest('.form-group').removeClass('has-error').addClass('has-success');
            mdlArmHelper.innerHTML = "";
        }

        // return false if there was an error in the modal dialog.  A FALSE return value will prevent a postback to the server.  Might be redundant since the button onclick also has 'return false'.
        return val;
    }