JSFiddle - React, Tailwind, and code Playground

by Dominic Myers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
<div class="ui three top attached steps">
    <a class="moving active step" data-step="1">
        <div class="content">
            <div class="title">Form One</div>
        </div>
    </a>
    <a class="disabled moving step" data-step="2">
        <div class="content">
            <div class="title">Form Two</div>
        </div>
    </a>
</div>

<div class="ui attached segment">
    <div class="ui form" data-stage="1">
        <div class="field">
            <label>First Name</label>
            <input type="text" id="forename" name="forename" placeholder="First Name">
        </div>
        <div class="field">
            <label>Last Name</label>
            <input type="text" id="surname" name="surname" placeholder="Last Name">
        </div>
        <div class="ui four column grid">
            <div class="left floated column"></div>
            <div class="right floated column">
                <button class="disabled fluid positive ui button moving" data-step="2">Next</button>
            </div>
        </div>
    </div>
    <div class="ui form" data-stage="2" style="display:none;">
        <div class="field">
            <div class="ui checkbox">
                <input id="terms" name="terms" type="checkbox" tabindex="0" class="hidden">
                <label>I agree to the Terms and Conditions</label>
            </div>
        </div>
        <div class="ui four column grid">
            <div class="left floated column">
                <button class="fluid positive ui button moving" data-step="1">Back</button>
            </div>
            <div class="right floated column">
                <button class="disabled fluid positive ui button"...

JavaScript

$(function() {
    $(".moving").on("click", function() {
        var step = $(this).data("step");
        $(".form").each(function(k, v) {
            if ($(v).data("stage")) {
                if ($(v).data("stage") === step) {
                    $(v).show();
                } else {
                    $(v).hide();
                }
            }
        });
        $(".step").each(function(k, v) {
            if ($(v).data("step") === step) {
                $(v).addClass("active");
            } else {
                $(v).removeClass("active");
            }
        });
    });
    $(".form[data-stage=1]").form({
        "inline": true,
        "on": "blur",
        "fields": {
            "forename": {
                "identifier": "forename",
                "rules": [{
                    "type": "empty",
                    "prompt": "Please enter your first name"
                }]
            },
            "surname": {
                "identifier": "surname",
                "rules": [{
                    "type": "empty",
                    "prompt": "Please enter your last name"
                }]
            }
        }
    });
    $("#forename, #surname").on("propertychange change click keyup input paste", function() {
    	$(".form[data-stage=1]").form("is valid") ? $(".moving[data-step=2]").removeClass("disabled") : $(".moving[data-step=2]").addClass("disabled");
    });
    $(".form[data-stage=2]").form({
        "inline": true,
        "on": "change",
        "fields": {
            "terms": {
                "identifier": "terms",
                "rules": [{
                    "type": "checked",
                    "prompt": "You must agree to the terms and conditions"
                }]
            }
        }
    });
    $(".ui.checkbox").checkbox({
        "onChecked": function() {
            $("#submit").removeClass("disabled");
        },
        "onUnchecked": function() {
            $("#submit").addClass("disabled");
        }
   ...