1

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>
Nicolo Lüscher
  • 595
  • 7
  • 22
Iyad
  • 166
  • 1
  • 12

3 Answers3

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]">
Ben West
  • 4,398
  • 1
  • 16
  • 16
  • But if you want to use JS: Your script seems to be working http://jsfiddle.net/akf0g2dx/2/ The error seems to be somewhere else. – Nicolo Lüscher Jul 04 '18 at 10:04
  • Hey, thanks for the answer. I did want to use only javascript instead of a pattern. Also, when I used your pattern it did not work for some reason. – Iyad Jul 04 '18 at 12:57
  • Rats. I didn't test it, it's your pattern – Ben West Jul 04 '18 at 15:11
2

Try this:-

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

alert(isArabic(string));


function isArabic(text) {
var arabic = /[\u0600-\u06FF]/;
result = arabic.test(text);
return result;
}
Mr. Roshan
  • 1,777
  • 13
  • 33
1

This is the piece of code that I finally used to make it work! All credits go to: https://stackoverflow.com/cv/leniel with his article: https://www.leniel.net/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.com/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>
Iyad
  • 166
  • 1
  • 12