JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <label>Name*
        <input type="text" id="name"> <span class="error">Error</span>

    </label>
</div>
<div>
    <label>Email*
        <input type="text" id="email"> <span class="error">Error</span>

    </label>
</div>
<div>
    <label>Password*
        <input type="password" id="password" class="aaa"> <span class="error errorPass">6 or more</span>

    </label>
</div>
<div>
    <label>Phone*
        <input type="text" id="phone"> <span class="error">Only number</span>

    </label>
</div>
<div>
    <button type="submit" id="submit">Submit</button>
</div>

CSS

.error {
    display: none;
}
.invalid .error {
    display: inline-block;
}
.invalid input {
    border-color: red; 
}
.valid input {
    border-color: green;
}

JavaScript

function nameValidate() {
     //name
     var validName = false;
     var nameVal = $('#name').val();
     if (nameVal) {
         $('#name').parent().removeClass('invalid').addClass('valid');
         validName = true;
     } else {
         $('#name').parent().removeClass('valid').addClass('invalid');
         validName = false;
     }
     return validName;
 }

 function emailValidate() {
     //email
     var validEmail = false;
     var emailVal = $('#email').val();
     var regEmail = /(\w+@[a-z_]+?\.[a-z]{2,6})/i;
     var resultEmail = emailVal.match(regEmail);
     if (resultEmail) {
         $('#email').parent().removeClass('invalid').addClass('valid');
         validEmail = true;
     } else {
         $('#email').parent().removeClass('valid').addClass('invalid');
         validEmail = false;
     }
     return validEmail;
 }

 function passValidate() {
     //password
     var valid = false;
     var passwordVal = $('#password').val();
     var regPassword = /\d|\w{6,}/;
     var resultPassword = passwordVal.match(regPassword);
     if (resultPassword) {
         $('#password').parent().removeClass('invalid').addClass('valid');
         valid = true;
     } else if (passwordVal == '') {
         $('#password').parent().removeClass('valid').addClass('invalid');
         $('.errorPass').text('Fill the field');
         valid = false;
     } else {
         $('#password').parent().removeClass('valid').addClass('invalid');
         valid = false;
     }
     return valid;
 }

 function phoneValidate() {
     //phone
     var validPhone = false;
     var inputVal = $('#phone').val();
     var regV = /^\d+$/;
     var result = inputVal.match(regV);
     if (result) {
         $('#phone').parent().removeClass('invalid').addClass('valid');
         validPhone = true;
     } else {
         $('#phone').parent().removeClass('valid').addClass('invalid');
         validPhone = false;
     }
     return validPhone;
 }

 $('#name').keyup(function () {
    ...