This is a really simple example of how HTML5 validation works. It works out of the box. You only need to set required attribute on required fields and the form will be submitted only if all form is valid to submit. In the following example, I make use of jQuery, but validation needs vanilla javascript, it's because I write $(this)[0], to get the DOM element and not the jQuery object.
//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>
It's all! You don't need nothing more. There are a lot of methods and properties to manage validation, but with this you can achieve what you want. Imagine your code like this:
<!-- 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>
And 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');
}
}
});
Tell me if this fits with your requirements. Note the form.attr('action') edition, it's to identify what action needs to perform depending on the button you clicked. There are tons of ways to do this, this edition is only an example
return falsebreaks the default action, that's HTML5 validation. Useonsubmitevent instead, and you don't need areturn falseif you use HTML validation, the form will never be submitted without javascript if the required fields are not filledif($(':focus').val() == 'delete'){ return confirm("Delete all positions for this day?"); }to be more concise.