Cacher is the code snippet organizer for pro developers

//  set custom validity message
if (someCondition) {
  document.getElementById('password').setCustomValidity('some message');
}

//  check validity
validity = document.getElementById('email').validity; // possible values: valueMissing, typeMismatch, patternMismatch, tooLong, rangeUnderflow, rangeOverflow, stepMismatch, valid, customError

//  check validation message
message = document.getElementById('email').validationMessage;

<!--  coloured measure -->
<meter value=75 min=0 low=20 high=80 max=100 optimum=50></meter>

<!--  progress bar  -->
<progress id="progressbar" value=50 min=0 max=100>

<!--  display output  -->
<input type="number" name="a" id="a" value="2"> x <input type="number" name="b" id="b" value="3"> = <output for="a b" name="product" form="" >6</output>
<!--  for: space-separated list of ids involved
      form: associated form id  -->
      
<!--  display output with inline calculation using value valueAsNumber and valueAsDate  -->
<input name="date" value="2017-01-16" type="date" oninput="x.value = this.valueAsDate; z.value = this.valueAsDate + y.valueAsNumber;" />
<output id="x" for="date" >2017-01-16</output> +
<input name="day" value="7" type="number" oninput="y.value = this.valueAsNumber; z.value = x.valueAsDate + this.valueAsNumber;" /> days =
<output id="y" for="day"></output>
<output name="z" id="z" for="date day"></output>

<!--  fields used outside the form  -->
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name" form="form"/>
<form id="form">...</form>

<!--  autocomplete  -->
<form autocomplete="off">
  <input type="text" autocomplete="on" /><!-- overrides default off -->
</form>

<!--  autofocus  -->
<form autocomplete="off">
  <input /><!-- the default focused element -->
  <input type="text" autofocus />
</form>

<!--  restrict input to regex pattern, title attribute contains popup on hover -->
<input type="text" pattern="[A-Za-z]{3}" title="3 letter country code" />

<!--  input multiple values -->
<input type="email|file" multiple />

<!--  restrict uploadable file types  -->
<input type="file" accept="[extension]|audio/*|video/*|image/*|[mediaType]"> 

<!--  override default form submission  -->
<input type="submit" formaction="alternative.php" formmethod="PUT" formenctype="multipart/form-data"o />

<!--  override validation -->
<input type="submit" formnovalidate />

<!--  specify where response is to be displayed -->
<input type="submit" formtarget="_blank|_self|_parent|_top|[iframeID]" />

<!--  slider
      if float is expected, step must be set to float or 'any'  -->
<input type="range" list="ticks" min=1 max=5 value=2 step=1 />
<datalist id="ticks">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
  <option value="4">four</option>
  <option value="5">five</option>
</datalist>

<!--  search field with optional dropdown suggestions  -->
<input type=search results=5>

<!--  colour picker  -->
<input type="color" value="#..." list="colours" />
<datalist id="colours">
   <option>#0000FF</option>
   <option>#00FF00</option>
   <option>#FF0000</option>
</datalist>

<!--  date picker   -->
<input type="date" id="..." value="2017-06-20" min="2017-06-20" max="2017-07-04" step=7 list="possibleDates" />
<datalist id="possibleDates">
  <option label="20th of June">2017-06-20</option>
  <option label="27th of June">2017-06-27</option>
  <option label="4th of July">2017-07-04</option>
</datalist>

<!--  telephone number  -->
<input type="tel" pattern="^(?\d{4})?[-\s]\d{3}[-\s]\d{4}.*?\)" />

<!--  url  -->
<input type="url" placeholder="http://www.example.com" pattern="(http|https|ftp)\:\/\/[a-zA-Z0-9\-\.\/]*" />

<!--  number
      if float is expected, step must be set to float or 'any'  -->
<input type="number" value="25" min="0" step="5" max="500"/>

<!--  form group with legend
      radio buttons should always be wrapped  -->
<fieldset role="group" aria-labelledby="formDescription">
  <legend id="formDescription">Fieldset description</legend>
  <div>
    <input type="radio" name="format" id="txt" value="txt" checked>
    <label for="txt">Text file</label>
  </div>
  <div>
    <input type="radio" name="format" id="csv" value="csv">
    <label for="csv">CSV file</label>
  </div>
</fieldset>