JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/Uunknownn/dc89541b2d0cf0b1fa43e23116d4ffb2/raw/2ebdf5c8eb52ee58f2d570af1f3cc7dda9c0cf5a/validator.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
			<div class="row">
				<div class="col-md-6 col-md-offset-3">
					<hr />
          <div class="alert alert-info" id='alert_msg'></div>
          
					<form id="login" class="form-group">
						<div class="form-group">
							<label class="control-label" for="formInput20">Username</label>
							<input name="uname" class="form-control" id="formInput20" placeholder="Username">
						</div>
						<div class="form-group">
							<label class="control-label" for="formInput20">E-mail</label>
							<input name="umail" class="form-control" id="formInput20" placeholder="E-mail" data-validate='required|match[uname]'>
							<div class="help-block"></div>
						</div>
						<div class="form-group">
							<label class="control-label" for="formInput20">Password</label>
							<input name="upass1" class="form-control" id="formInput20" placeholder="Password">
						</div>
						<div class="form-group">
							<label class="control-label" for="formInput20">Repeat Password</label>
							<input name="upass2" class="form-control" id="formInput20" placeholder="Repeat Password" data-validate='required|match[upass1]'>
						</div>
						<button class="btn btn-default btn-block">Log In</button>
					</form>
					<hr />
				</div>
			</div>
		</div>

JavaScript

$('#login').on('submit', function(e){
  e.preventDefault();

  $(this).validate(function(r){
    if (r.success) {
      $('#alert_msg').text('Done successfullt!');
    } else {
      $('#alert_msg').text(r.msg);
    }
  });
})