JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/dilvie/h5Validate/master/jquery.h5validate.js"></script>
<form action="#" id="mc-form-one" onsubmit="document.getElementById('email-confirmed').value')" >
   
<fieldset class="step-one">
 
          <section class="errors">
            <p id="error-name"><span>Please enter a valid name.</span></p>
            <p id="error-password"><span>Please enter your password.</p>
            <p id="error-repeat-password"><span>Please re-type your password.</span> Your passwords didn't match.</p>
          </section>


          <div class="outerDiv">
            <label for="email">Email</label> 
            <input  type="email" name="email" class="h5-email" data-h5-errorid="error-email" required  />
            <div class="input-validation"></div>
          </div>
          <div class="outerDiv">
            <label for="name">Email</label> 
            <input  type="name" name="name" class="h5-name" data-h5-errorid="error-name" required  />
            <div class="input-validation"></div>
          </div>
          <div  class="outerDiv">
            <label for="password">Password</label>
            <input type="password" name="password" id="password"  pattern="[A-Za-z0-9]{5,12}" data-h5-errorid="error-password" required />
            <div class="input-validation"></div>
          </div>
          <div class="outerDiv">
            <label for="repeat-password">Re-type Password</label>
          <input  type="password" name="password2" id="password2"  pattern="[A-Za-z0-9]{5,12}" data-h5-errorid="error-repeat-password" required />
            <div class="input-validation"></div>
          </div>
          <div id="TGB" class="outerDiv checkbox">  
            <label><input type="checkbox" required /><span></span></label>
          </div>
          <div id="submit" class="outerDiv buttons">
            <input type="reset" value="Cancel" class="reset">
            <input type="submit" value="Sign up" class="submit">
          </div>
       ...

CSS

/*sign up errors*/
form .errors {float:left;}
form .errors p{color:#333;font-size:1.2em;}
form .errors p span{color:#cc0033;font-weight:bold;}

JavaScript

$('#mc-form-one').h5Validate();
    
$("#error-name, #error-password , #error-repeat-password").hide(); 

//HOW can I trigger h5Validate and display the ("#error-email") when the class"ui-state-error"