JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/additional-methods.js"></script>
<form id="register-form" name="register-form">
 <input type="text" class="ico1" name="firstname" id="firstname" placeholder="enter name " title="enter name "/>
 <input type="Submit"/>
</form>

JavaScript

var regx = /^[a-zA-Z\u0600-\u06FF,-][\sa-zA-Z\u0600-\u06FF,-]*$/;
$.validator.setDefaults({
		submitHandler: function() {
			alert("submitted!");
		}
	});
$("#register-form").validate({
  debug: true, // REMOVE THIS, IT IS FOR DEMO DEBUG ONLY!!!
  rules: {
    firstname: {
      required: true,
      pattern: regx,
      minlength: 2
    },
  },
  messages: {
    firstname: {
      required: "please enter name",
      minlength: jQuery.validator.format("At least {0} characters required!"),
      pattern: "enter only english or arabic letters"
    }
  },
  submitHandler: function(form) {
    form.submit();
  }
});