Question

我有以下表格，其中包含标准用户信息。我试图尝试的，我不明白为什么它不起作用，是检查表单中的所有字段是否为空。

以下是我正在使用的以下脚本：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>

为实现这一目标，我认为最好检查每个字段是否未选择字段：

function checkForm() {              
            if (document.myform.name.value=="") {
             document.getElementById("modal-title").innerHTML = "<h4></h4>";
                document.getElementById("modal-body").innerHTML = "<p>You have left the input box empty." + "<br /><br />" + "Enter a Authorization Number.</p>";
                $("#invalidModal").modal();
                document.getElementById("myform").focus();
                return false
            } 

            if (document.PDF.email.value=="") {
              document.getElementById("modal-title").innerHTML = "<h4></h4>";
                document.getElementById("modal-body").innerHTML = "<p>You have left the input box empty." + "<br /><br />" + "Enter a Authorization Number.</p>";
                $("#invalidModal").modal();
                document.getElementById("myform").focus();
                return false
            }   
        }

但是，当我尝试运行它时，模态不会出现。

这是模式：

<!--- Invalid Entries Modals --->
        <div class="modal fade" id="invalidModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header" style="background-color:#428bca !important">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 id="modal-title" class="modal-title" id="myModalLabel" style="text-align:center; color:white !important"></h4>
              </div>
              <div id="modal-body" class="modal-body" style="text-align:center;">
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>
        <!------------------------------------------>

以下是表格。我不确定我做错了什么。任何帮助将不胜感激：

<form class="form-style-5" id="myform" name="email">
                <fieldset>
                    <legend><span class="number">1</span>Info</legend>
                        <input type="text" name="Name" id="name" placeholder="Your Name *">
                        <input type="email" name="Email" id="email" placeholder="Your Email *"> 
                        <label for="job">Interested in:</label>
                        <select id="DropList" name="products">
                            <optgroup label="Curl Products">
                              <option value="disabled"></option>
                              <option value="curls1">Product1</option>
                              <option value="curls2">Product2</option>
                              <option value="curls3">Product3</option>
                              <option value="curls4">Product4</option>
                              <option value="curls5">Product5</option>
                              <option value="curls6">Product6</option>
                              <option value="other">Other</option>
                            </optgroup>
                            <!--<optgroup label="Outdoors">
                              <option value="football">Football</option>
                              <option value="swimming">Swimming</option>
                              <option value="fishing">Fishing</option>
                              <option value="climbing">Climbing</option>
                              <option value="cycling">Cycling</option>
                              <option value="other_outdoor">Other</option>
                            </optgroup>-->
                        </select>      
                </fieldset>
                <fieldset>
                    <legend><span class="number">2</span> Additional Info</legend>
                    <textarea name="field3" placeholder="About Your Hair"></textarea>
                </fieldset>

                    <input type="submit" onclick="return checkForm(this.form)" value="Submit" />
                    <input type="reset" value="Clear" onclick="return resetForm(this.form);" />
            </form>

Answer 1

$('#myModal').modal();仅初始化模态但不显示模态。要直接打开模态，请使用$('#myModal').modal('show');

请参阅Bootstrap methods section

此外，我建议将焦点绑定到模态关闭事件，如下所示：

$('#invalidModal').on('hidden.bs.modal', function () {
    document.getElementById("myform").focus();
});

然后在模态关闭后，表格将被聚焦。因此，在您的具体情况下，代码将是

$('#invalidModal').modal(); // initialize modal
$('#invalidModal').on('hidden.bs.modal', function() {
    // attach the following code to the modal close event
    document.getElementById("myform").focus();
})    

function checkForm() {
    if (document.myform.name.value == "") {
        document.getElementById("modal-title").innerHTML = "<h4></h4>";
        document.getElementById("modal-body").innerHTML = "<p>You have left the input box empty." + "<br /><br />" + "Enter a Authorization Number.</p>";
        $("#invalidModal").modal('show'); // show modal
        return false
    }

    if (document.PDF.email.value == "") {
        document.getElementById("modal-title").innerHTML = "<h4></h4>";
        document.getElementById("modal-body").innerHTML = "<p>You have left the input box empty." + "<br /><br />" + "Enter a Authorization Number.</p>";
        $("#invalidModal").modal('show'); // show modal
        return false
    }
}

检查表单是否为空白功能不起作用

1 个答案: