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({
			highlight : function(label) {
				$(label).closest('.form-group').addClass('has-error');
				$(".tab-content").find("fieldset.tab-pane:has(has-error)").each(function(index, tab) {
					alert("error from if");
					if ($(".tab-content").find("field.tab-pane.active:has(has-error)").length == 0) {
						alert("error from each");
						var id = $(tab).attr("id");
						console.log(id);
						$('a[href="#' + id + '"]').tab('show');
					}

				});
			},
			invalidHandler : function(event, validator) {
				// 'this' refers to the form
				$('#myTab').on('shown', function(e) {
					console.log(this);
					e.target;// activated tab
					$($(e.target).attr('href')).find("fieldset.has-error :input:first").focus();
				});
				var errors = validator.numberOfInvalids();
				if (errors) {
					var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You missed ' + errors + ' fields. They have been highlighted';
					$("div.has-error span").html(message);
					$("div.has-error").show();
				} else {
					$("div.has-error").hide();
				}
			},
			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,
				},

			}
		});
	    $("[type=submit]").submit(function (e) {
	        e.preventDefault();

	    });

	});