Forms

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="console.log('Called on discard, or when from has no changes');" oncancel="two.reset()">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);