JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/h5Validate/0.8.4/jquery.h5validate.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<form role="form">
    <div class="form-group">
        <label for="FirstName">Your Name</label>
        <input class="form-control" id="FirstName" type="text" data-h5-errorid="invalid-FirstName" title="Please provide your first name." placeholder="Full Name" required />
        <p class="help-block help-block-invalid" id="invalid-FirstName" style="display:none;">This stuff will get replaced by the title contents.</p>
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control h5-email" id="exampleInputEmail1" data-h5-errorid="invalid-exampleInputEmail1" placeholder="Enter email" title="Your email is required" required>
        <p class="help-block help-block-invalid" id="invalid-exampleInputEmail1" style="display:none;"></p>
    </div>
    <div class="form-group">
        <label for="test">Your Website</label>
        <input class="form-control h5-url" id="test" type="url" data-h5-errorid="invalid-CC" title="You have to specify a valid URL." placeholder="http://example.com" required />
        <p class="help-block help-block-invalid" id="invalid-CC" style="display:none;">This stuff will get replaced by the title contents.</p>
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" required>
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p...

CSS

body {
    padding: 30px;
}
/* h5Validate */
 .ui-state-error, .ui-state-error:focus, .has-error .form-control {
    border-color: #a94442;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    /* custom */
    background-color: #fef3f4;
}
.help-block-invalid {
    color: red;
}

JavaScript

// Add Patterns (http://www.regular-expressions.info/examples.html)
$.h5Validate.addPatterns({
    phone: /([\+][0-9]{1,3}([ \.\-])?)?([\(]{1}[0-9]{3}[\)])?([0-9A-Z \.\-]{1,32})((x|ext|extension)?[0-9]{1,4}?)/,
    url: /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/
});

// Then init the validation
$('form').h5Validate();