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

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');

请参阅引导方法部分

---

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

$('#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
}
}