所以我有一个html5必填输入字段，当我省略以下jQuery确认警报时，它可以正常工作...
$(".acal-confirm").click(function(){
if($(this).val() == 'delete'){
if (!confirm("Delete all positions for this day?")){
return false;
}
}
if($(this).val() == 'publish'){
if (!confirm("Publish all positions for this day?")){
return false;
}
}
if($(this).val() == 'draft'){
if (!confirm("Save all positions for this day as a draft?")){
return false;
}
}
});
...当我包含它时，确认警报会按预期显示，但是如果输入字段为空，则不再触发html5验证。
链接到的html（包装在表单标签中）...
<button name="submit" type="submit" value="draft" class="btn btn-primary btn-lg acal-confirm" title="Do not make available publically">Save draft</button>
<button name="submit" type="submit" value="publish" style="margin-left:10px;" class="btn btn-primary btn-lg acal-confirm" title="Save and publish the positions publically">Publish</button>
<button name="submit" type="submit" value="delete" style="margin-left:10px;" class="btn btn-primary btn-lg acal-confirm" title="Delete the positions for this day">Delete day</button>
是什么原因导致这种情况发生？谢谢。
这是一个有关HTML5验证如何工作的非常简单的示例。开箱即用。您只需要required在必填字段上设置属性，并且仅当所有表单都可以提交时才提交表单。在下面的示例中，我使用了jQuery，但是验证需要使用普通的javascript，这是因为我编写$(this)[0]来获取DOM元素而不是jQuery对象。
//Listen the buttons (its type is not submit!)
$('input[type=button]').on('click', function(ev) {
var action = $(this).val();
if (confirm("Are you sure to perform "+action+"?")) {
// force the submit since there is not a submit button
$('#myForm').trigger('submit');
}
// we don't need an else, nor return false! We only submit if it's confirmed
});
// Listen to the submit event, so when it's the form submitted we can know it
$('#myForm').on('submit', function(e) {
// checkValidity() returns true if the form will be send, and false if not
alert("Form will be submitted?: "+$(this)[0].checkValidity());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="POST" id="myForm">
Name: <input type="text" required><br>
Email: <input type="email" required><br>
<input type="button" value="First action">
<input type="button" value="Second action">
<input type="button" value="Third action">
</form>这就是全部！您再也不需要了。有很多方法和属性可用于管理验证，但是通过此方法和属性，您可以实现所需的功能。想象这样的代码：
<!-- FIRST CHANGE THE TYPE TO button -->
<button name="submit" type="button" value="draft" class="btn btn-primary btn-lg acal-confirm" title="Do not make available publically">Save draft</button>
<button name="submit" type="button" value="publish" style="margin-left:10px;" class="btn btn-primary btn-lg acal-confirm" title="Save and publish the positions publically">Publish</button>
<button name="submit" type="button" value="delete" style="margin-left:10px;" class="btn btn-primary btn-lg acal-confirm" title="Delete the positions for this day">Delete day</button>
和JS：
$(".acal-confirm").click(function(){
if($(this).val() == 'delete'){
if (confirm("Delete all positions for this day?")){
$('form').attr('action', '/url/to/delete').trigger('submit');
}
}
if($(this).val() == 'publish'){
if (confirm("Publish all positions for this day?")){
$('form').attr('action', '/url/to/publish').trigger('submit');
}
}
if($(this).val() == 'draft'){
if (confirm("Save all positions for this day as a draft?")){
$('form').attr('action', '/url/to/save').trigger('submit');
}
}
});
告诉我这是否符合您的要求。注意form.attr('action')版本，它是根据您单击的按钮确定需要执行的操作。有很多方法可以做到这一点，此版本仅是一个示例
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句