JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://thisisa.simple-url.com/js/jquery.validate.js"></script>
<form name="test-form">
    <span id="tab-click-1" class="tab-click">Tab 1</span> | <span id="tab-click-2" class="tab-click">Tab 2</span><br /><br />
    <div class="tab" id="tab-1">
        <label for="text_1">Text 1</label><input name="text_1" value="" /><br />
        <label for="text_2">Text 2</label><input name="text_2" value="" /><br />
    </div>
    <div class="tab" id="tab-2" style="display:none;">
        <label for="text_3">Text 3</label><input name="text_3" value="" /><br />
        <label for="text_4">Text 4</label><input name="text_4" value="" /><br />
    </div>
    <ul style="display:none; list-style-type: none;" id="message-error"></ul>
    <button type="submit">Save</button>
</form>
<h4>Log</h4>
<ul id="log"></ul>

CSS

form span {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
}

JavaScript

var log = function(msg) {
    $('ul#log').append('<li>'+msg+'</li>');
},
validate_form = function(elements) {
    var params = {
        errorLabelContainer: '#message-error',
        ignore: [],
        wrapper: 'li',
        onfocusout: false,
        onkeyup: false,
        rules: {
            text_1: 'required',
            text_2: 'required',
            text_3: 'required',
            text_4: 'required',
        },
        debug:true
    };
    if(elements) {
        $.each(params.rules, function(k, v) {
            if($.inArray(k, elements) < 0) {
                delete params.rules[k];
            }
        });
    }
    log('params: '+JSON.stringify(params));
    return $('form[name=test-form]').validate(params).form();
};
$(function() {
    $('span.tab-click').click(function() {
        var self = $(this),
        selected = self.prop('id').replace('-click', ''),
        selected_index = selected.replace('tab-', ''),
        elements = ['text_1', 'text_2'];
        valid = true;
        if(selected_index > 1) {
            var valid = validate_form(elements);
            log('is valid? '+valid);
        }
        if(!valid) {
            return false;
        }
        $('div.tab').hide();
        $('div#'+selected).show();
    });
    $('form[name=test-form]').submit(function(e) {
        var form = $(this);
        e.preventDefault();
        var is_valid = validate_form(false);
        log('is valid? '+is_valid);
        if(is_valid) {
            log('success');
            $('#message-error').empty().append('<li>Form is validated.</li>');
        }
    });
});