The control supports validation statuses such as error and success. These statuses can be toggle by any framework level forms API. But the control component does also support the native HTML Validation API. Defining a Validity State on a control-message allows messages to appear conditionally based on the current input validity state.
To manage validation manually use the novalidate attribute to disable HTML5 validation. If you are using a framework that manages validation like Angular, then novalidate is automatically applied. MDN Validity State
Use real-time validation with contextual error messages to disable submit until form is valid.
<form id="validation" nve-layout="column gap:md" style="max-width: 350px">
<nve-input>
<label>email</label>
<input type="email" name="email" required pattern=".+@nvidia.com" autocomplete="off" />
<nve-control-message error="valueMissing">required</nve-control-message>
<nve-control-message error="patternMismatch">invalid NVIDIA email</nve-control-message>
</nve-input>
<nve-password>
<label>password</label>
<input type="password" name="password" required minlength="6" autocomplete="off" />
<nve-control-message error="valueMissing">required</nve-control-message>
<nve-control-message error="tooShort">minimum length is 6 characters</nve-control-message>
</nve-password>
<nve-button disabled>login to account</nve-button>
<nve-alert-group hidden status="success">
<nve-alert></nve-alert>
</nve-alert-group>
</form>
<script type="module">
const form = document.querySelector("form#validation");
const alertGroup = document.querySelector("#validation nve-alert-group");
const alert = document.querySelector("#validation nve-alert");
form.addEventListener("submit", (e) => {
e.preventDefault();
const { email, password } = Object.fromEntries(new FormData(form));
alert.innerText = email + " / " + password;
alertGroup.hidden = false;
});
form.addEventListener("input", (e) => {
form.querySelector("nve-button").disabled = form.matches(":invalid");
});
</script>
<form>
<nve-input>
<label>email</label>
<input type="email" name="email" required pattern=".+@nvidia\.com" autocomplete="off" />
<nve-control-message error="valueMissing">required</nve-control-message>
<nve-control-message error="patternMismatch">invalid NVIDIA email</nve-control-message>
</nve-input>
<script type="module">
const form = document.querySelector('form');
form.addEventListener('submit', e => {
e.preventDefault();
const values = Object.fromEntries(new FormData(form));
console.log(values); // { email: '...' }
});
</script>
Reset
Individual controls can be reset by calling the reset() method on the control element. If controls are in a HTML Form then calling reset() on the form resets all child controls.
Form reset functionality allowing users to clear individual fields or reset the entire form.
<form nve-layout="column gap:md" style="max-width: 350px">
<nve-input>
<label>email</label>
<input type="email" name="email" required pattern=".+@nvidia.com" autocomplete="off" value="test@nvidia.com" />
<nve-icon-button aria-label="reset" icon-name="cancel" container="flat" type="button"></nve-icon-button>
<nve-control-message error="valueMissing">required</nve-control-message>
<nve-control-message error="patternMismatch">invalid NVIDIA email</nve-control-message>
</nve-input>
<nve-password>
<label>password</label>
<input type="password" name="password" required minlength="6" autocomplete="off" />
<nve-control-message error="valueMissing">required</nve-control-message>
</nve-password>
<nve-button type="button">reset form</nve-button>
</form>
<script type="module">
const form = document.querySelector("form");
const input = form.querySelector("nve-input");
const resetInput = form.querySelector('nve-icon-button[icon-name="cancel"]');
const resetForm = form.querySelector("nve-button");
resetInput.addEventListener("click", (e) => input.reset());
resetForm.addEventListener("click", (e) => form.reset());
form.addEventListener("reset", (e) => console.log(e));
</script>
Error Groups
Login form with grouped error display showing all validation issues together after submission attempt.
<form nve-layout="column gap:md" style="max-width: 350px" novalidate>
<nve-input>
<label>email</label>
<input type="email" name="email" required pattern=".+@nvidia.com" autocomplete="off" />
<nve-control-message status="error">invalid email</nve-control-message>
</nve-input>
<nve-password>
<label>password</label>
<input type="password" name="password" required minlength="6" autocomplete="off" />
<nve-control-message status="error">minimum length is 6 characters</nve-control-message>
</nve-password>
<nve-button>login to account</nve-button>
<nve-alert-group status="danger">
<nve-alert>invalid email</nve-alert>
<nve-alert>password required</nve-alert>
</nve-alert-group>
</form>
Success Groups
Login form example of success feedback with positive confirmation messages for valid input and successful form submission.
<form nve-layout="column gap:md" style="max-width: 350px" novalidate>
<nve-input>
<label>username</label>
<input type="email" name="email" required pattern=".+@nvidia.com" autocomplete="off" />
<nve-control-message status="success">username available</nve-control-message>
</nve-input>
<nve-password>
<label>password</label>
<input type="password" name="password" required minlength="6" autocomplete="off" />
</nve-password>
<nve-button>login to account</nve-button>
<nve-alert-group status="success">
<nve-alert closable>account created</nve-alert>
</nve-alert-group>
</form>