JSFiddle - React, Tailwind, and code Playground

jquery.validate with bootstrap

by Jennifer Perrin

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<form>
    <div class="form-group">
        <label class="control-label" for="firstname">First Name:</label>
        <div class="input-group"> <span class="input-group-addon">*</span>
            <input class="form-control" placeholder="name" name="firstname" type="text" />
        </div>
    </div>
    <div class="form-group">
        <label class="control-label" for="lastname">Lastname:</label>
        <div class="input-group"> <span class="input-group-addon">*</span>
            <input class="form-control" placeholder="lastname" name="lastname" type="text" />
        </div>
    </div>
    <div class="form-group">
        <label class="control-label" for="sometext">Some Text:</label>
        <div class="input-group"> <span class="input-group-addon">-</span>
            <input class="form-control" placeholder="sometext" name="sometext" type="text" />
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

CSS

body { margin: 5%; }

JavaScript

// http://jqueryvalidation.org/reference/

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        sometext: {
            minlength: 5,
            maxlength: 10,
            required: false
        }
    },
    highlight: function (element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function (element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});