JSFiddle - React, Tailwind, and code Playground

by marhaba

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
   <form class="form-horizontal">
                <div class="form-group">
            <label for="fullname" class="col-sm-2 control-label">Name</label>
            <div class="col-sm-5">
                <input type="text" id="Text1" name="fullname" class="form-control"  />
            </div>
            <div class="col-sm-5">
            </div>
        </div>
        
        <div class="form-group">
            <label for="password" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input type="password" id="password" name="password" class="form-control"   />
            </div>
        </div>
        
        <div class="form-group">
            <label for="comments" class="col-sm-2 control-label">Comments</label>
            <div class="col-sm-10">
                <textarea name="comments" id="comments" class="form-control" rows="5" cols="40"></textarea>
            </div>
        </div>

        <div class="form-group">
            <label for="picture" class="col-sm-2 control-label">Picture</label>
            <div class="col-sm-10">
                <input type="file" name="picture" id="file" class="form-control" />
            </div>
        </div>

        <div class="form-group">
            <label for="luckynumber" class="col-sm-2 control-label">Lucky Number</label>
            <div class="col-sm-10">
                <select name="luckynumber" id="luckynumber" class="col-sm-10 form-control"> 
                    <option>double zero</option>
                    <option>seven</option>
                    <option>thirteen</option>
                </select>
            </div>
        </div>

        <div class="form-group">
           ...

CSS

body {
            margin: 30px;
        }
        .error {
            color: red;
            font-size: 0.8em;
        }

JavaScript

$('form').validate({
            rules: {
                fullname: {
                    required: true
                },
                password: {
                    required: true
                }
            },
            highlight: function (element, errorClass) {
                $(element).closest('.form-group').addClass('has-error');
            },
            unhighlight: function (element, errorClass) {
                $(element).closest('.form-group').removeClass('has-error');
            },
            errorPlacement: function (error, element) {
                error.appendTo(element.parent().next());
            }

        });