JSFiddle - React, Tailwind, and code Playground

by alachgar

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- This jquery.min.js is necessary for popup to Print Modal -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
		<!-- This For Phone Mask -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
		
		<!-- This bootstrap.min.css is necessary for the CSS of the app in a whole -->		
		<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">		
		<!-- This bootstrap.js Should always Remain at the end here so it is Last Loaded -->	
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
		<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>


<form action="/signup">
   <div class="panel panel-primary setup-content" id="step-2">
			  <div class="panel-heading">
				<h3 class="panel-title"> APPLICANT'S INFO</h3>
			  </div>
			
			<div class="panel-body">
			  <p>
				<h4 style="color:red;"><b> Please provide Applicant's Contact Information.</b></h4>
			  </p>
				
				<div class="form-group">
				  <label class="control-label required">Applicant's First Name: </label>
				  <input type="text" name="first_name" id="first_name" placeholder="Applicant's First Name" class="form-control field" />
				</div>
				<div class="form-group">
				  <label class="control-label">Applicant's Last Name:</label>
				  <input type="text" name="last_name" id="last_name" placeholder="Applicant's Last Name" class="form-control field"    />
				</div>
				<div class="form-group">
				  <label class="control-label">Age Reported by Applicant:</label>
				  <input type="text" name="age" id="age" placeholder="Applicant's Age" class="form-control field" ...

JavaScript

var form = document.querySelector('form')
var inputs = document.querySelectorAll('input')
var required_inputs = document.querySelectorAll('input[required]')
var register = document.querySelector('input[type="button"]')
form.addEventListener('keyup', function(e) {
    var disabled = false
    inputs.forEach(function(input, index) {
        if (input.value === '' || !input.value.replace(/\s/g, '').length) {
            disabled = true
        }
    })
    if (disabled) {
        register.setAttribute('disabled', 'disabled')
    } else {
        register.removeAttribute('disabled')
    }
})


(function ($) {
				$(document).ready(function () {
					jQuery.validator.setDefaults({
						highlight: function (element, errorClass, validClass) {
							if (element.type === "radio") {
								this.findByName(element.name).addClass(errorClass).removeClass(validClass);
							} else {
								$(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
								$(element).closest('.form-group').find('i.fa').remove();
								$(element).closest('.form-group').append('<i class="fa fa-exclamation fa-lg form-control-feedback"></i>');
							}
						},
						unhighlight: function (element, errorClass, validClass) {
							if (element.type === "radio") {
								this.findByName(element.name).removeClass(errorClass).addClass(validClass);
							} else {
								$(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
								$(element).closest('.form-group').find('i.fa').remove();
								$(element).closest('.form-group').append('<i class="fa fa-check fa-lg form-control-feedback"></i>');
							}
						}
					});

					$("form").validate({
						rules: {
							'first_name': {
								required: true,
								minlength: 3,
								maxlength: 20
							},
							'last_name': {
							required: true,
							minlength: 3,
							maxlength: 20
							
							}/// no comma, break here...