jQuery addClass example

Change class name on click in jQuery

by Patrick Hund

HTML

<table>
  <tr>
    <td>
      <form method='post'>
        <textarea style="width:50%" rows="5" onkeyup="hi()" pattern="^[\x20-\x7F]+$" cols="40"></textarea>
        <input type="button" value="Save" />
      </form>
    </td>
  </tr>
</table>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

function hi() {
console.log('hi');
}
function validateTextarea() {
  var errorMsg = "Please match the format requested.";
  var textarea = this;
  var pattern = '^[\\x20-\\x7F]+$';
  // check each line of text
  $.each($(this).val().split("\n"), function() {
    // check if the line matches the pattern
    var hasError = !this.match(pattern);
    if (typeof textarea.setCustomValidity === 'function') {
      textarea.setCustomValidity(hasError ? errorMsg : '');
    } else {
      // Not supported by the browser, fallback to manual error display...
      $(textarea).toggleClass('error', !!hasError);
      $(textarea).toggleClass('ok', !hasError);
      if (hasError) {
        $('textarea').attr('title', errorMsg);
      } else {
        $(textarea).removeAttr('title');
      }
    }
    return !hasError;
  });
}