{
  "element": "forms",
  "entrypoint": "@nvidia-elements/core/forms/validation.examples.json",
  "items": [
    {
      "id": "forms-validation-login-form",
      "name": "LoginForm",
      "template": "<form id=\"validation\" nve-layout=\"column gap:md\" style=\"max-width: 350px\">\n  <nve-input>\n    <label>email</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia.com\" autocomplete=\"off\" />\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    <nve-control-message error=\"patternMismatch\">invalid NVIDIA email</nve-control-message>\n  </nve-input>\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    <nve-control-message error=\"tooShort\">minimum length is 6 characters</nve-control-message>\n  </nve-password>\n  <nve-button disabled>login to account</nve-button>\n  <nve-alert-group hidden status=\"success\">\n    <nve-alert></nve-alert>\n  </nve-alert-group>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form#validation\");\n  const alertGroup = document.querySelector(\"#validation nve-alert-group\");\n  const alert = document.querySelector(\"#validation nve-alert\");\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    const { email, password } = Object.fromEntries(new FormData(form));\n    alert.innerText = email + \" / \" + password;\n    alertGroup.hidden = false;\n  });\n  form.addEventListener(\"input\", (e) => {\n    form.querySelector(\"nve-button\").disabled = form.matches(\":invalid\");\n  });\n</script>\n",
      "summary": "Use real-time validation with contextual error messages to disable submit until form is valid.",
      "description": "",
      "composition": true,
      "tags": [
        "pattern"
      ]
    },
    {
      "id": "forms-validation-error-group",
      "name": "ErrorGroup",
      "template": "<form nve-layout=\"column gap:md\" style=\"max-width: 350px\" novalidate>\n  <nve-input>\n    <label>email</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia.com\" autocomplete=\"off\" />\n    <nve-control-message status=\"error\">invalid email</nve-control-message>\n  </nve-input>\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n    <nve-control-message status=\"error\">minimum length is 6 characters</nve-control-message>\n  </nve-password>\n  <nve-button>login to account</nve-button>\n  <nve-alert-group status=\"danger\">\n    <nve-alert>invalid email</nve-alert>\n    <nve-alert>password required</nve-alert>\n  </nve-alert-group>\n</form>\n",
      "summary": "Login form with grouped error display showing all validation issues together after submission attempt.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "forms-validation-success-group",
      "name": "SuccessGroup",
      "template": "<form nve-layout=\"column gap:md\" style=\"max-width: 350px\" novalidate>\n  <nve-input>\n    <label>username</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia.com\" autocomplete=\"off\" />\n    <nve-control-message status=\"success\">username available</nve-control-message>\n  </nve-input>\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n  </nve-password>\n  <nve-button>login to account</nve-button>\n  <nve-alert-group status=\"success\">\n    <nve-alert closable>account created</nve-alert>\n  </nve-alert-group>\n</form>\n",
      "summary": "Login form example of success feedback with positive confirmation messages for valid input and successful form submission.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "forms-validation-reset-form",
      "name": "ResetForm",
      "template": "<form nve-layout=\"column gap:md\" style=\"max-width: 350px\">\n  <nve-input>\n    <label>email</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia.com\" autocomplete=\"off\" value=\"test@nvidia.com\" />\n    <nve-icon-button aria-label=\"reset\" icon-name=\"cancel\" container=\"flat\" type=\"button\"></nve-icon-button>\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    <nve-control-message error=\"patternMismatch\">invalid NVIDIA email</nve-control-message>\n  </nve-input>\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n  </nve-password>\n  <nve-button type=\"button\">reset form</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const input = form.querySelector(\"nve-input\");\n  const resetInput = form.querySelector('nve-icon-button[icon-name=\"cancel\"]');\n  const resetForm = form.querySelector(\"nve-button\");\n  resetInput.addEventListener(\"click\", (e) => input.reset());\n  resetForm.addEventListener(\"click\", (e) => form.reset());\n  form.addEventListener(\"reset\", (e) => console.log(e));\n</script>\n",
      "summary": "Form reset functionality allowing users to clear individual fields or reset the entire form.",
      "description": "",
      "composition": true,
      "tags": []
    },
    {
      "id": "forms-validation-lit-forms",
      "name": "LitForms",
      "template": "<app-login></app-login>\n",
      "summary": "Forms work with LitElement",
      "description": "",
      "composition": false,
      "tags": [
        "test-case"
      ]
    }
  ]
}