I'm trying to make an HTML page (that is simply a form) that accepts both English and Arabic inputs. For example: First Name and Last Name: (Have to be in English) Full name in Arabic: (Has to be in Arabic) I tried playing around by using the following code:

function isArabic(text) {
var pattern = /[\u0600-\u06FF\u0750-\u077F]/;
result = pattern.test(text);
return result;
}

But I'm not experienced in javascript and am having a hard time getting it to work and linking it properly in the html

This is a sample of the HTML:

 <form name="taskForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
    <b>First Name: </b>
    <br>
    <input type="text" name="firstName" max="15" required>
    <br><br>
    <b>Last name: </b>
    <br>
    <input type="text" name="lastName" max="15" required>
    <br><br>
    <b>Name in Arabic: </b>
    <br>
    <input type="text" name="arName" max="100"> 
    <br><br>
    <b>Gender: </b>
    <br><input type="radio" name="Gender" value="male" required>  Male
    <input type="radio" name="Gender" value="female" required>  Female
    <br><br>
    <b>Salary: </b>
    <br>
    <input type="number" name="salary" step="0.001" min="0">
    <br><br>
</form>

I'm trying to make an HTML page (that is simply a form) that accepts both English and Arabic inputs. For example: First Name and Last Name: (Have to be in English) Full name in Arabic: (Has to be in Arabic) I tried playing around by using the following code:

function isArabic(text) {
var pattern = /[\u0600-\u06FF\u0750-\u077F]/;
result = pattern.test(text);
return result;
}

But I'm not experienced in javascript and am having a hard time getting it to work and linking it properly in the html

This is a sample of the HTML:

 <form name="taskForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
    <b>First Name: </b>
    <br>
    <input type="text" name="firstName" max="15" required>
    <br><br>
    <b>Last name: </b>
    <br>
    <input type="text" name="lastName" max="15" required>
    <br><br>
    <b>Name in Arabic: </b>
    <br>
    <input type="text" name="arName" max="100"> 
    <br><br>
    <b>Gender: </b>
    <br><input type="radio" name="Gender" value="male" required>  Male
    <input type="radio" name="Gender" value="female" required>  Female
    <br><br>
    <b>Salary: </b>
    <br>
    <input type="number" name="salary" step="0.001" min="0">
    <br><br>
</form>

• javascript
• html

• 1 What are you expecting and what are you getting? – Krishna Prashatt Commented Jul 4, 2018 at 9:59
• Your pattern says "must have at least one Arabic letter". Is that what you want? Do you want "all characters must be Arabic letters"? – Amadan Commented Jul 4, 2018 at 10:06

3 Answers 3

Inputs have a pattern attribute where you can put your regex. No JS required.

<input type="text" name="arName" pattern="[\u0600-\u06FF\u0750-\u077F]">

Try this:-

var string = 'عربية‎';

alert(isArabic(string));


function isArabic(text) {
var arabic = /[\u0600-\u06FF]/;
result = arabic.test(text);
return result;
}

This is the piece of code that I finally used to make it work! All credits go to: https://stackoverflow./cv/leniel with his article: https://www.leniel/2012/10/javascript-regex-jquery-to-match-only-english-characters-in-input-textbox.html

I was able to use his code which took only English and simply changed the Unicode values to those of the Arabic letters:

$("#arabicCheck").on("keypress", function (event) {
 var arabicAlphabetDigits = /[\u0600-\u06ff]|[\u0750-\u077f]|[\ufb50-\ufc3f]|[\ufe70-\ufefc]|[\u0200]|[\u00A0]/g;

/* Retrieving the key from the char code passed in event.which
 For more info on even.which, look here: http://stackoverflow./q/3050984/114029
var key = String.fromCharCode(event.which); */

if (event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39 || arabicAlphabetDigits.test(key)) {
  return true;
}
  return false;
});

$('#arabicCheck').on("paste", function (e) {
e.preventDefault();
});
</script>

This is how it looked like in the HTML section:

<b>Name in Arabic: </b><br>
   <input id="arabicCheck" type="text" name="arName" max="100" >
   <br><br>