allenhwkim · October 1, 2024 21:38 · allenhwkim · Oct 1, 2024
diff --git a/form-validation.html b/form-validation.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <title>Form controls and validation</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
  </head>
  <body>

    <form onsubmit="handleSubmit(event)" noValidate> <!-- noValidate -->
      <fieldset>
        <legend>Text inputs:</legend>
        <input type="text" name="name" placeholder="text" pattern="Hello [a-z]+" required />: text starts with "Hello ""
        <br/>
        <input type="email" name="email" placeholder="email address" required />: email
        <br/>
        <input type="search" name="search" placeholder="search" required />: search
        <br/>
        <input type="tel" name="tel" placeholder="phone number" required />: phone
        <br/>
        <input type="url" name="url" placeholder="url" required />: url
        <br/>
        <input type="password" name="password" minlength="8" 
          placeholder="password" required />: password
        <br/>
      </fieldset>

      <fieldset>
        <legend>Number/color/date/time</legend>
        <input type="number" name="number" placeholder="number" min="1" max="100" required />: number
        <br/>
        <input type="month" name="month" reqquierd /> : Month selector
        <br/>
        <input type="time" name="time" min="09:00" max="18:00" step="1800" required />: time
        <br/>
        <input type="date" name="date" min="2024-06-01" max="2025-08-31" required />: date
        <br/>
        <input type="color" name="color" required /> : color
        <br/>
        <input type="file" name="avatar" accept="image/png, image/jpeg" required />
        <br/>
        <input type="range" name="volume" min="0" max="100" required /> : Range
      </fieldset>

      <fieldset>
        <legend>Select</legend>
        <select name="simple" required>
          <option>Banana</option>
          <option selected>Cherry</option>
          <option>Lemon</option>
        </select>: single select
        <br/>
        <select id="multi" name="multi" multiple size="6" required>
          <optgroup label="fruits">
            <option>Banana</option>
            <option selected>Cherry</option>
            <option>Lemon</option>
          </optgroup>
          <optgroup label="vegetables">
            <option>Carrot</option>
            <option>Eggplant</option>
            <option>Potato</option>
          </optgroup>
        </select>: multiple select with groups
      </fieldset>

      <fieldset>
        <legend>checkbox</legend>
        <input type="checkbox" name="scales" required /> Scales
        <input type="checkbox" name="horns" required />Horns
      </fieldset>

      <fieldset>
        <legend>radio</legend>
        <input type="radio" name="drone" value="huey" required />Huey
        <input type="radio" name="drone" value="dewey" required />Dewey
      </fieldset>

      <textarea name="textarea" cols="30" rows="5" placeholder="textarea" required></textarea>

      <br/>
      <button>Submit</button>
    </form>

    <script>
      function handleSubmit(e) {
        console.log(getFormData(e.target));
        console.log(getFormErrors(e.target));
      }

      function getFormData(form) {
        const data = (new FormData(form))
          .entries()
          .reduce( (acc, [k, v]) => {acc[k]=v; return acc}, {});
        return data;
      }

      function getFormErrors(form) {
        const errors = [];
        Array.from(form.elements).forEach(el => {
          if (!el.checkValidity()) {
            errors.push(`${el.name} - ${el.validationMessage}`);
          }
        });
        return errors.length && errors;
      }
    </script>

  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Form controls and validation</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width" />
	</head>
	<body>

	<form onsubmit="handleSubmit(event)" noValidate> <!-- noValidate -->
	<fieldset>
	<legend>Text inputs:</legend>
	<input type="text" name="name" placeholder="text" pattern="Hello [a-z]+" required />: text starts with "Hello ""
	<br/>
	<input type="email" name="email" placeholder="email address" required />: email
	<br/>
	<input type="search" name="search" placeholder="search" required />: search
	<br/>
	<input type="tel" name="tel" placeholder="phone number" required />: phone
	<br/>
	<input type="url" name="url" placeholder="url" required />: url
	<br/>
	<input type="password" name="password" minlength="8"
	placeholder="password" required />: password
	<br/>
	</fieldset>

	<fieldset>
	<legend>Number/color/date/time</legend>
	<input type="number" name="number" placeholder="number" min="1" max="100" required />: number
	<br/>
	<input type="month" name="month" reqquierd /> : Month selector
	<br/>
	<input type="time" name="time" min="09:00" max="18:00" step="1800" required />: time
	<br/>
	<input type="date" name="date" min="2024-06-01" max="2025-08-31" required />: date
	<br/>
	<input type="color" name="color" required /> : color
	<br/>
	<input type="file" name="avatar" accept="image/png, image/jpeg" required />
	<br/>
	<input type="range" name="volume" min="0" max="100" required /> : Range
	</fieldset>

	<fieldset>
	<legend>Select</legend>
	<select name="simple" required>
	<option>Banana</option>
	<option selected>Cherry</option>
	<option>Lemon</option>
	</select>: single select
	<br/>
	<select id="multi" name="multi" multiple size="6" required>
	<optgroup label="fruits">
	<option>Banana</option>
	<option selected>Cherry</option>
	<option>Lemon</option>
	</optgroup>
	<optgroup label="vegetables">
	<option>Carrot</option>
	<option>Eggplant</option>
	<option>Potato</option>
	</optgroup>
	</select>: multiple select with groups
	</fieldset>

	<fieldset>
	<legend>checkbox</legend>
	<input type="checkbox" name="scales" required /> Scales
	<input type="checkbox" name="horns" required />Horns
	</fieldset>

	<fieldset>
	<legend>radio</legend>
	<input type="radio" name="drone" value="huey" required />Huey
	<input type="radio" name="drone" value="dewey" required />Dewey
	</fieldset>

	<textarea name="textarea" cols="30" rows="5" placeholder="textarea" required></textarea>

	<br/>
	<button>Submit</button>
	</form>

	<script>
	function handleSubmit(e) {
	console.log(getFormData(e.target));
	console.log(getFormErrors(e.target));
	}

	function getFormData(form) {
	const data = (new FormData(form))
	.entries()
	.reduce( (acc, [k, v]) => {acc[k]=v; return acc}, {});
	return data;
	}

	function getFormErrors(form) {
	const errors = [];
	Array.from(form.elements).forEach(el => {
	if (!el.checkValidity()) {
	errors.push(`${el.name} - ${el.validationMessage}`);
	}
	});
	return errors.length && errors;
	}
	</script>

	</body>
	</html>