Multiple Submit buttons testing including HTML5 validation

This fiddle demonstrates how a submit button triggers a submit but when replaced within it's click event will not continue to submit the form. The form will have to be submitted manually instead if the element triggering the original submit has been replaced in the same process.

by Matt Rummler

HTML

<form id="aForm" action="http://jsfiddle.net/">
    <fieldset id="innerForm">
        <label for="saveTxt">
            Enter inner text
        </label>
        <input id="saveTxt" type="text" required>
        <input id="saveButton" class="button" name="save" type="submit" value="Save">
    </fieldset>
    <label for="requiredText">
        Enter Text
    </label>
    <input id="requiredText" type="text" required>
        <input class="button" name="save" type="submit" value="Submit">
    </form>

CSS

input.button
{
    background-color:rgba(75,145,250,5);
}

JavaScript

/*
$("#innerForm").on("submit", function()
{
//    $("#aForm").submit(); //this didn't seem to work
    alert("innerForm has been submitted.");
    return false;
});
*/
$("#aForm").on("submit", function()
{
    alert("aform has been submitted.");
    return false;
});
//NOTE, just changed this so the innerForm is a fieldset instead of a form... when it was a form the outer form submit button wouldn't work... apparently someone intentionally planned all this... without actually building forms to see what makes sense
//apparently all submit buttons are equal and will submit the highest level form, unfortunately this means that required fields in the outer form aren't required... it also, for some really odd reason, means the outer forms submit button simply doesn't work... which makes no sense
//This final setup allows both submit buttons to submit the entire form (again submit buttons are effectively synonymous which I suppose makes sense...). So as long as the inner structure is NOT another form this works so any submit button makes the required validation work...