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