JSFiddle - React, Tailwind, and code Playground

by Kerrick

HTML

<fieldset id="personal-info">
		          			<label for="first-name" class="first-name">What is your first name?</label>
		          			<input type="text" id="first-name">

		          			<label for="last-name" class="last-name">What is your last name?</label>
		          			<input type="text" id="last-name">

		          			<label for="address" class="address">What is your street address?</label>
		          			<input type="text" id="address">

		          			<div class="row">
		          				<span class="third">
		          					<label for="city" class="city">Your City</label>
		          					<input type="text" id="city">
		          				</span>
							
							<span class="third">
			          				<label for="state" class="state">Your State</label>
			          				<input type="text" id="state">
		          				</span>
		          				
		          				<span class="third">
			          				<label for="zip" class="zip">Your Zip Code</label>
			          				<input type="text" id="zip">
		          				</span>
		          			</div>

		          			<label for="email" class="email">What is your email?</label>
		          			<input type="text" id="email">

		          			<span class="continue" id="cont-one">Continue &gt; &gt;</span>
		          		</fieldset>

CSS

label { display:block; }
input { display:block; width:100%; } 

span.continue {
background: #e4693a;
color: white;
font-family: sans-serif;
text-transform: uppercase;
font-size: 1.5em;
cursor: pointer;
padding: 10px;
margin-top: 10px;
display: inline-block;
}

.required { color:red; }

JavaScript

var personalInfo = $("#first-name,#last-name,#address,#city,#state,#zip,#email");
    
    var personalInfoLabels =  $("label.first-name,label.last-name,label.address,label.city,label.state,label.zip,label.email");
    
    $("#cont-one").click(function(){
        // Let's set up a boolean (true or false) variable called "error" to see if there are any errors
        var error = false;
        // Then let's loop through the fields using jQuery#each
        personalInfo.each(function(ii) {
            // We'll be doing something to the label no matter what, so let's save it to a variable so we don't have to type it twice.
            var label = $(personalInfoLabels[ii]);
            // This tests if the value is blank
            if ($(this).val() === '') {
                label.addClass('required');
                // Here we say "there has been an error" by setting "error" to true
                error = true;
            }
            else {
                // If the value isn't blank, don't show the "required" error state class.
                label.removeClass('required');
            }
                
        });
        // If error is false, there were no fields that have any errors. We can slideUp the form!
        if (error === false) {
            $("#cont-one").parent("fieldset").slideUp();
        }
    });