Submit with validations
There are three button types
- submit Trigger form submission
- cancel If the form has changes, show alert dialog
- reset Reset form to initial state
<!-- method="dialog" Will prevent any page redirects or endpoint calls --> <form id="one" method="dialog" style="display: inline-grid;" onsubmit="submit(this)"> <mc-textfield name="name" label="Name" supporting-text="Enter name" required></mc-textfield> <mc-textfield name="email" label="Email" supporting-text="Enter email" type="email"></mc-textfield> <mc-select name="favnum" label="Pick a number" required supporting-text> <mc-option value="1">one</mc-option> <mc-option value="2">two</mc-option> <mc-option value="3">three</mc-option> </mc-select> <mc-checkbox name="agree" required label="Agree"></mc-checkbox> <!-- The buttons do not need to be inside the from element --> <mc-button type="submit">Submit</mc-button> <mc-button type="reset" style="color: var(--mc-error);">reset</mc-button> <!-- type="cancel" is not available on native buttons --> <mc-button type="cancel" style="color: var(--mc-error);" onclick="console.log('Called on discard or no change')">Cancel</mc-button> </form>
// submit method // in example it is called from the form onsubmit attribute function submit(form) { const formData = new FormData(form); console.log([...formData.entries()]) } // You can also use the submit event document.querySelector('#one').addEventListener('submit', submit);
Cancel change detection
The cancel button will prompt a dialog when it is clicked and detects any changes in the
form data
<!-- method="dialog" Will prevent any page redirects or endpoint calls --> <form id="two" method="dialog" style="display: inline-grid;" onsubmit="page.submit(this)"> <mc-textfield name="name" label="Name" supporting-text="Enter name" required></mc-textfield> <mc-checkbox name="agree" required label="Agree"></mc-checkbox> <!-- The buttons do not need to be inside the from element --> <div style="display: flex; justify-self: end;"> <mc-button form="two" type="submit">Submit</mc-button> <!-- type="cancel" is custom and does not natively exist --> <mc-button form="two" type="cancel" onclick="two.reset(); console.log('Called on discard, or when from has no changes');">Cancel</mc-button> </div> </form>
// submit method // in example it is called from the form onsubmit attribute function submit(form) { const formData = new FormData(form); console.log([...formData.entries()]) } // You can also use the submit event document.querySelector('#one').addEventListener('submit', submit);