JSFiddle - React, Tailwind, and code Playground

by mikev10

HTML

<link rel="stylesheet" href="http://mystreetlife.com/myhome/admin/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="http://mystreetlife.com/myhome/admin/dist/css/bootstrapValidator.css">
<script src="http://mystreetlife.com/myhome/admin/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="http://mystreetlife.com/myhome/admin/dist/js/bootstrapValidator.js"></script>
<link rel="stylesheet" href="http://mystreetlife.com/myhome/admin/css/flat-ui.css">
<div class="row" style="margin-top:20px">
	    <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
			<form id="defaultForm" method="post" action="submit.php">
				<fieldset>
					<h2>Please Register</h2>
					<hr class="colorgraph">
				
      				
					<div class="form-group">
	                    <input type="email" name="username" id="username" class="form-control input-lg" placeholder="Email Address" value="">
	                    <small class="help-block" data-bv-validator="notEmpty" data-bv-for="username" data-bv-result="NOT_VALIDATED" style="display: none;"></small>
	                    <small class="help-block" data-bv-validator="emailAddress" data-bv-for="username" data-bv-result="NOT_VALIDATED" style="display: none;"></small>
	                    <small class="help-block" data-bv-validator="remote" data-bv-for="username" data-bv-result="NOT_VALIDATED" style="display: none;"></small>
	                    <small class="help-block" data-bv-validator="different" data-bv-for="username" data-bv-result="NOT_VALIDATED" style="display: none;"></small>
					</div>
					<small class="help-block col-lg-offset-3 col-lg-9" style="display: none;"></small>
					<div class="form-group">
	                    <input type="text" name="username1" id="username1" class="form-control input-lg" placeholder="Username" value="">
	                    <small class="help-block" data-bv-validator="notEmpty" data-bv-for="username1" data-bv-result="NOT_VALIDATED" style="display: none;"></small>
	       ...

JavaScript

$(document).ready(function() {
	// Generate a simple captcha
	function randomNumber(min, max) {
	return Math.floor(Math.random() * (max - min + 1) + min);
	};
	$('#captchaOperation').html([randomNumber(1, 20), '+', randomNumber(1, 25), '='].join(' '));
	
    $('#defaultForm').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
            	trigger: 'blur',
                validators: {
                	notEmpty: {
                        message: 'The Email Address is required and cannot be empty'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    },
                    /*remote: {
                    	url: 'submit.php',
                    	message: 'This username is not available'
                    },*/
                    different: {
                        field: 'password',
                        message: 'The email address and password cannot be the same as each other'
                    }
                }
            },
             username1: {
             	trigger: 'blur',
                validators: {
                	notEmpty: {
                        message: 'The username is required and cannot be empty'
                    },
                    different: {
                        field: 'password',
                        message: 'The username and password cannot be the same as each other'
                    },
                    stringLength: {
						min: 3,
						max: 30,
						message: 'The username must be more than 6 and less than 30 characters long'
					}
                }
            },
            password: {
            	trigger: 'blur',
                validators: {
                   ...