JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<form id="proposal-form" method="post" novalidate="novalidate" enctype="multipart/form-data">
Client Name:<br />
<input type="text" name="client_name" id="client_name"/>
<br /><br />
E-mail:<br/>
<input type= "text"  type="text" name="client_email" value="" placeholder="[email protected]"/>	
<br/><br/>
<input type="submit" name="submit1" id="sub" value="Continue "/>
<input type="button" name="submit2" id="Assign" value="Assign" />
</form>

<div id="dialog-form" title="Assign task">
  <p class="validateTips"></p>
 
<form id="dialog" method="post" novalidate="novalidate"> 
  <fieldset>
    <label for="name" style="display:block;">Name:</label>
    <input type="text" name="ass_name" id="ass_name" class="text ui-widget-content ui-corner-all" style="display:block;" />
    <label for="email" style="display:block;">E-mail:</label>
    <input type="text" name="ass_email" id="ass_email" value="" class="text ui-widget-content ui-corner-all" style="display:block;" />  
  </fieldset>

</form>

JavaScript

$(document).ready(function(){
  //custom validation rule - text only
      var name = $( "#ass_name" ),
      email = $( "#ass_email" ),
      allFields = $( [] ).add( name ).add( email ),
      tips = $( ".validateTips" );
	  
	   function checkLength( o, n, min, max ) {
      if ( o.val().length > max || o.val().length < min ) {
        o.addClass( "ui-state-error" );
        updateTips( "Length of " + n + " must be between " +
          min + " and " + max + "." );
        return false; }
		
		 else {
        return true;
      }
    }
	  
	
	function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }
 
    function checkRegexp( o, regexp, n ) {
      if ( !( regexp.test( o.val() ) ) ) {
        o.addClass( "ui-state-error" );
        updateTips( n );
        return false;
      } else {
        return true;
      }
    }
    
	
	$( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 350,
      width: 350,
      modal: true,
      buttons: {
	  	"Send E-mail": function(){
		  var bValid = true;
          allFields.removeClass( "ui-state-error" );
          bValid = bValid && checkLength(name, "Person name", 2, 16 );
          bValid = bValid && checkLength(email, "email", 6, 80 );
 		
 
          bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Person name may consist of a-z, 0-9, underscores, begin with a letter." );
          // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
          bValid = bValid && checkRegexp(email,...