JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<form role="form" id="contact-form" action="#" method="#">
    <div class="form-group">
        <label for="lastname">Nom</label>
        <input type="text" class="form-control" id="lastname" required title="Nom est requis">
    </div>
    <div class="form-group">
        <label for="firstname">Prénom</label>
        <input type="text" class="form-control" id="firstname" required title="Prénom est requis">
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="email" required title="Email est requis">
    </div>
    <div class="form-group">
        <label for="phone">Téléphone</label>
        <input type="text" class="form-control" id="phone" placeholder="(Facultatif)">
    </div>
    <div class="form-group">
        <label for="message">Votre message</label>
        <textarea row="10" class="form-control" id="message" required title="Message est requis"></textarea>
    </div>
    <button type="submit" class="btn btn-default">Envoyer</button>
</form>

CSS

body {
    padding: 2em;
}

JavaScript

$('form').validate({
    invalidHandler: function (e, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            if ($('#tav-invalidform').length == 0) {
                $('form').prepend('<div class="alert alert-warning" id="tav-invalidform"></div>');
            }
            var message = errors == 1 ? 'You missed 1 field. It has been highlighted below' : 'You missed ' + errors + ' fields.  They have been highlighted below';
            $("#tav-invalidform").html(message).hide().fadeIn();
        }
    },
    highlight: function (element) {
        $(element).parent('.form-group').addClass('has-warning');
    },
    errorPlacement: function (label, element) {
        label.prependTo('#tav-invalidfields');
    },
    wrapper: 'li'
});