JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" class="form-container" id="reg_form">
                                	<div class="form-title">
                                     <p>Email</p>
		                            </div>
                            <input type="email" value="" name="email" class="form-field reg_email" placeholder="E-mail">
                            <br>
                                	<div class="form-title">
                                     <p>Пароль</p>
		                            </div>
                            <input type="password" name="password" class="form-field reg_pass" placeholder="Пароль">
                            <br>
                                	<div class="form-title">
                                     <p>Повторите пароль</p>
		                            </div>
                            <input type="password" name="confirm" class="form-field reg_pass2" placeholder="Повторите пароль">
                            <br>
                            <input type="checkbox" name="terms" value="1">
                            <label for="terms" style="text-align:right;" class="reg_i">Я согласен с правилами сайта</label>
                            <br>
                            <div class="submit-container">
                            <input type="submit" name="submit" class="submit-button regb" value="Зарегистрироваться">
                            </div>
                        </form>

JavaScript

$(document).ready(function(){
   $(".regb").on("click", function(e){//клик по кнопке 
      e.preventDefault();//отменяем обычное поведение 
       console.log('Button clicked');
      var email = $(".reg_email").val();//значение поля 
      var pass= $(".reg_pass").val();//значение поля 
      var pass2= $(".reg_pass2").val();//значение поля 
      var i= $(".reg_i").val();//значение поля 
      	  
   r = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i;
  if (!r.test(email)) {

	  $(".reg_email").css({'border':'1px solid red'});
      }
      else {
	  $(".reg_email").css({'border':'1px solid green'});			 
      }
      
      if (pass < 12345678) {
	  $(".reg_pass").css({'border':'1px solid red'});
      }
      else {
	  $(".reg_pass").css({'border':'1px solid green'});	
      }
      
      if (pass2 != pass ) {
	  $(".reg_pass2").css({'border':'1px solid green'});
      }
      else {
	  	$(".reg_pass2").css({'border':'1px solid red'});		 
      }
      
       if (i != "1") {
	  $(".reg_i").css({'border':'1px solid red'});
      }
      else {
	  $(".reg_i").css({'border':'1px solid green'});			 
      }
      
      if((email.length > 0) && (pass.length >= 8 ) && (pass2 == pass) && (i == "1")){
          alert('good');
      }			 
   });	 
});