必填字段为空时关闭模态框

Question

我的应用程序中的模式和必填字段有问题。

在一页中，我有 50 到 60 个输入字段，有些是必需的，有些不是。 我不能只是使用他们的ID检查每个输入的值，无论它是否为空。

目前，我在每个必需的输入字段中添加了引导程序required的 class。 它工作正常，因为它专注于空的必填字段。

此外，我还在同一页面上处理模式。 当我单击保存按钮时，模式将打开并显示用户将接受条款和协议的接受消息。

用户点击模态框内的提交按钮后，一些必填字段为空， required class的工具提示将在模态打开时弹出并关注空白字段。 这是问题，当我关闭模式时，所需的空输入将不再集中。

问题是，是否可以以编程方式关闭模式，同时不会丢失所需输入的焦点和工具提示？

按钮触发模态的代码：

  <a href="#" runat="server" id="btnUndertaking"
                                class="btn btn-success m-t-40" data-toggle="modal"
                                data-target="#myModal" data-backdrop="static" data-keyboard="false">
                                <i class="fa fa-floppy-o" aria-hidden="true"></i>SAVE</a>

这是模态的代码：

<div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">
                        <center>UNDERTAKING</center>
                    </h4>
                </div>
                <div class="modal-body">
                    <div runat="server" id="alert_box1" visible="false" class="alertalert alert-danger fade in">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        <asp:Label runat="server" ID="lblalert1" Text=""></asp:Label>
                    </div>

                    <div class="row">

                        <div class="row">
                            <%-- <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">--%>
                            <div class="col-md-12">
                                <div class="white-box">
                                    <p>
                                        I/We hereby certify that all information in this form are true, correct
                                        and complete. I/We understand and agree that: (a) all notices, requests,
                                        demands and other communications shall be deemed to have duly given if sent
                                        to the residential/ other address and/or e-mail address provided herein,
                                        and (b) any misrepresentation and/or falsification of information in this 
                                        document is sufficient ground for the cancellation of my/our purchase.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <asp:Button runat="server" ID="cmdSubmit" Text="SUBMIT"
                        CssClass="btn btn-success"
                        OnClick="cmdSubmit_Click" />

                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

编辑

我已经看到这个问题的答案已被接受。 我正在尝试做同样的事情，但它不适用于模态。

我尝试实现此代码，但required的工具提示不再显示。

function checkInputs() {
  $('input').filter('[required]').each(function() {
    if ($(this).val() === '') {
      $('#btnUndertaking').prop('disabled', true)
      isValid = false;
    } else {
     isValid = true;
    }
  });
  if(isValid) {$('#btnUndertaking').prop('disabled', false)}
  return isValid;
}

//Enable or disable button based on if inputs are filled or not
$('input').filter('[required]').on('keyup',function() {
checkInputs()
})

如果必填字段为空，则不要打开弹出窗口

Answer 1

看起来我已经明白了....大声笑，我累了 3 个小时，我找到了一个解决方案。

如果有人有同样的问题，我会发布它。 这可能对他们有所帮助。

首先感谢这篇文章，主要感谢@kris selbekk，因为他为我提供了获取所有必填字段的核心解决方案。

使用 jQuery 检查是否需要输入字段

然后，这个。

  $("#cmdSave").click(function () {
                //get all inputs
                const inputs = document.querySelectorAll('input');

                // Get only the required ones
                const requiredFields = Array.from(inputs).filter(input => input.required);

                var counter = 0;
                var isValid = false;

                for (let i = 0; i <= requiredFields.length - 1; i++) {
                    //skip if the field is disabled
                    if (!requiredFields[i].disabled) {
                        //check the field if required (the input field should be set to `required`)
                        if (requiredFields[i].required) {
                            //check if the value is not null
                            if (requiredFields[i].value === '') {
                                //Focus the required field.
                                requiredFields[i].focus();
                                //set the border color for the user interaction
                                requiredFields[i].setAttribute("style", "border-color: red");
                                //show error message to notify user
                                toastr.error('The field  is required');
                                isValid = false;
                                break;
                            }
                        }
                    }
                    counter += 1;
                }

                //if the counter is equals to  the required fields then set the isValid to true
                if (counter == requiredFields.length) {
                    isValid = true;
                }           

                //check if valid, then show the modal.
                if (isValid) {
                    $('#myModal').modal('show');
                }
            });

谢谢大家