Validation Message Testing

by Tommy

HTML

<input type="email" id="input" autocomplete="email" x-autocompletetype="email" pattern="^([\w!#$%&amp;'*+\-\/=?\^`{|}~]+\.)*[\w!#$%&amp;'*+\-\/=?\^`{|}~]+@((((([a-zA-Z0-9]{1}[a-zA-Z0-9\-]{0,62}[a-zA-Z0-9]{1})|[a-zA-Z])\.)+[a-zA-Z]{2,62})|(\d{1,3}\.){3}\d{1,3}(:\d{1,5})?)$" required="" accesskey="e" title="Email (required)" name="EmailAddress" value="" maxlength="100" placeholder="[email protected]">


<pre id="validity">
</pre>
<div>
  <p>
    Validation Message: <span id="message"></span>
  </p>
</div>
<div>
  <p>
    Is Valid: <span id="isValid"></span>
  </p>
</div>

JavaScript

const el = document.getElementById('input');
function updateText(){	

	let isValid = el.checkValidity();
  let v = {}
  // this object is some special kind of annoying
  for(var key in el.validity){
  	v[key] = el.validity[key];
  }
	let validity = JSON.stringify(v, null, 2);
  let msg = el.validationMessage || '';
  
  document.getElementById('validity').innerHTML = validity;
  document.getElementById('message').innerHTML = msg;
  document.getElementById('isValid').innerHTML = isValid + '';

}

el.onchange=updateText;
el.onkeyup=updateText;

//init
updateText();