JSFiddle - React, Tailwind, and code Playground

by zazvorniki

HTML

<div id='errorBlock'></div>

<p>
<span>No Numbers: </span>
<input class='noNum' />
</p>

<p>
<span>No Letters: </span>
<input class='noLetter' />
</p>

<p>
<span>No Spacial Chars: </span>
<input class='noSpecial' />
</p>

<p>
<span>No Spaces: </span>
<input class='noSpace' />
</p>

JavaScript

$('input').on('blur', function() {
  var current_value = $(this).val();
  var noSpace = current_value.replace(/ +/g, "");
  var newVal;
  if ($(this).hasClass('noNum')) {
    var spVal = noSpace.replace(/[&\/\\,+()$~%":*?<>{}!@^=_]/g, '')
    newVal = spVal.replace(/[0-9]/g, "");
  } else if ($(this).hasClass('noSpecial')) {
    newVal = noSpace.replace(/[&\/\\,+()$~%"#:*?<>{}!@^=_]/g, '')
  } else if ($(this).hasClass('noLetter')) {
    var spVal = noSpace.replace(/[&\/\\#,+$~%.'":*?<>{}!@^=_]/g, '')
    newVal = spVal.replace(/[a-z]/g, "");
  } else {
    newVal = noSpace
  }
  $(this).val(newVal);
});

function showErrorMessage(error) {
  $('#errorBlock').show();
  $('#errorBlock').html('<p>' + error + '</p>');
  $('html, body').animate({
    scrollTop: 0
  }, 'slow', function() {});
}

function hideError() {
  $('#errorBlock').hide();
  $('#errorBlock').text('')
}