JSFiddle - React, Tailwind, and code Playground

by Djamil

HTML

<form id="myform">
    <dl>
        <dt>Enter some text (try a 'q' or 'z' to see an error)</dt>
        <dd><input type="text" class="doesNotContain:'qz'"/></dd>
    </dl>
    <input type="submit">
</form>

CSS

body {
    font-family: verdana;
}
dt {
    padding: 5px;
    background: #ddd
}
dd {
    padding: 5px;
    border: #ddd solid;
    border-width: 0px 1px 1px;
}
input[type=text] {
    display: block;
    width: 100%;
}

JavaScript

Form.Validator.add('doesNotContain', {
  errorMsg: function(field, props){
    return 'The value you input cannot contain any of the following letters: ' + props.doesNotContain;
  },
  test: function(field, props){
    if (props.doesNotContain)
      return !field.get('value').match(new RegExp('[' + props.doesNotContain + ']', 'i'));
    else return true;
  }
});

new Form.Validator.Tips($('myform'), {
    pointyTipOptions: {
        point: 12
    },
    onFormValidate: function(passed, myform, event) {
        if (passed) alert('Nice job!');
        event.preventDefault();
    }
});