jQuery addClass example

Change class name on click in jQuery

HTML

<input id="input" type="text" />

CSS

.invalid {
  border: 2px solid red; 
}

JavaScript

// save reference to input
const input = $('#input');

// save regex to check against
const regex = new RegExp('^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$', 'im');

// on keypress, get user input
// strip non-digits (1-2 => 12 | 5.6 => 56)
// run regex test and add/remove class to show validation
function checkPhoneNumber(){
  const user_input = input.val().replace(/\D/g, ""); // replace any non-digits with nothing
  const valid_phone = regex.test(user_input);
  if (valid_phone){
    input.removeClass('invalid');
  } else {
    input.addClass('invalid');
  }
}

// attach listener with function
input.on('keyup', checkPhoneNumber);