Skip to content

Instantly share code, notes, and snippets.

@jameesjohn
Created January 15, 2020 22:38
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jameesjohn/e42be27a04b56c1948b73aadd11b4fb5 to your computer and use it in GitHub Desktop.
const nameField = document.querySelector('#name');
nameField.addEventListener('input', function(event) {
const value = event.target.value;
const isValid = (nameField.validity.valid && value.length === 10);
debugger
if(isValid) {
nameField.style.borderColor = 'black';
} else {
nameField.style.borderColor = 'red';
}
})
const numField = document.querySelector('#num');
const messageBox = document.querySelector('#messagebox');
numField.addEventListener('input', function(event) {
const value = event.target.value
const isValid = (numField.validity.valid);
if(isValid) {
messageBox.style.display = 'none';
messageBox.textContent = '';
} else {
messageBox.style.display = 'block';
let errorMessage = '';
if(numField.validity.rangeOverflow) {
errorMessage += 'The number is too long. ';
}
if(numField.validity.rangeUnderflow) {
errorMessage += 'The number is too short. ';
}
if(numField.validity.stepMismatch) {
errorMessage += 'The number is not allowed. ';
}
if(numField.validity.valueMissing) {
errorMessage += 'The number field is required';
}
messageBox.textContent = errorMessage;
messageBox.style.color = 'red';
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment