JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/jzaefferer/jquery-validation/master/jquery.validate.js"></script>
<form id="signup" action="/action">
<input name="fullname" type="text" />
<input type="submit">
</form>
JavaScript
$(document).ready(function() {
var validCharactersRegex = new RegExp(/^[a-zA-Z0-9 -]+$/);
var doesNotStartWithDashOrSpace = new RegExp(/^[^ -]/);
var fullname_invalid = function(value) {
return validCharactersRegex.test(value) && doesNotStartWithDashOrSpace.test(value) && value.indexOf(' ') == -1 && value.indexOf('--') == -1 && value.indexOf(' -') == -1 && value.indexOf('- ') == -1;
}
$.validator.addMethod("custom_fullname", function(value, element) {
return fullname_invalid(value);
}, 'Your Name should be entered like: "blahblah"');
$('#signup').validate({
rules: {
fullname: {
required: true,
custom_fullname: true
}
}
});
$('#signup').on('submit', function(event) {
event.preventDefault();
});
});