JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.1/jquery.form-validator.min.js"></script>
Select Language:<select>
    <option value="english">English</option>
    <option value="arabic">Arabic</option>
</select>
<form action="" id="myForm">
  <p>
    Name:<input name="user" data-validation="length" data-validation-length="min5" data-validation-error-msg="Maximum Length is 5"/>
  </p>
   <p>
    Email:<input type="text" data-validation="email" data-validation-error-msg="Invalid Email"/>
  </p>
    <div>
        <input type="submit" value="Submit" />
    </div>
</form>

CSS

.error {
    color:red;
}
.input-validation-error {
    border:1px solid red;
}
h1 {
    font-weight:bold;
}
#debug {
    font-size:small;
}

JavaScript

var invalidEmail = 'بريد إلكتروني خاطئ';
var maxLength = 'أقصى طول هو 5';

$.validate({
});