JSFiddle - React, Tailwind, and code Playground

by Renier de Bruyn

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form name="modify">
    <ul id="myTab" class="nav nav-tabs form-tabs">
        <li id="Personal Details" class="active">	<a data-toggle="tab" href="#form1">Personal Details</a>

        </li>
        <li class="" id="Contact Details">	<a data-toggle="tab" href="#form2">Contact Details</a>

        </li>
        <li class="" id="Address Details">	<a data-toggle="tab" href="#form3">Address Details</a>

        </li>
        <li class="" id="Job Related Details">	<a data-toggle="tab" href="#form4">Job Related Details</a>

        </li>
    </ul>
    <div class="tab-content">
        <fieldset id="form1" class="tab-pane active form-horizontal form-validated">
            <div class="row">
                <div class="col-xs-6 col-md-6 col-lg-6 control-group">
                    <div class="form-group">
                        <div class="controls">
                            <div class="input-group">	<span class="input-group-addon">First Name</span>

                                <input type="text" value="" class="form-control" name="first_name" required data-validation-required-message="Please enter your name" placeholder="First name">
                            </div>
                            <p class="help-block"></p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6 col-md-6 col-lg-6">
                    <div class="form-group">
                        <div class="controls">
                            <div class="input-group">	<span class="input-group-addon">Second Name/s</span>

                                <input type="text" value="" class="form-control" name="second_name"...

JavaScript

$(document).ready(function () {

	    $("form[name=modify]").validate({
	        ignore: [],
	        rules: {
	            first_name: {
	                required: true,
	            },
	            surname: {
	                required: true
	            },
	            id_number: {
	                required: true
	            },
	            mobile_number: {
	                number: true,
	                minlength: 10,
	            },
	            home_number: {
	                number: true,
	                minlength: 10,
	            },
	            other_contact: {
	                number: true,
	                minlength: 10,
	            },
	            line1: {
	                required: true,
	            },
	            city_town: {
	                required: true,
	            },
	            postal_code: {
	                required: true,
	                minlength: 4,
	            },
	            curr_renumeration: {
	                required: true,
	                number: true,
	            },
	            expect_renumeration: {
	                required: true,
	                number: true
	            },
	            email: {
	                email: true,
	                required: true,
	            },
	            highlight: function (label) {
	                $(label).closest('.control-group').addClass('has-error');
	                console.log($(label).closest('.control-group').addClass('has-error'));
	                if ($(".tab-content").find("div.tab-pane.active:has(div.has-error)").length == 0) {
	                    $(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function (index, tab) {
	                        var id = $(tab).attr("id");

	                        $('a[href="#' + id + '"]').tab('show');
	                    });
	                    $('#myTab').on('shown', function (e) {
	                        console.log(this);
	                        e.target // activated tab
	                       ...