title: Validate inputbox for special language
body: <p>I wrote a form with a single input that takes the users name only in persian language. at the first time when user keypress, it defines the character. if the character was not persian it prevents to type more and show the error: "change your keybord language to persian" .it works great.but the problem is even if keyboard language was persian at first time it shows the error and in second and third keypressing it will be ok. my question is why the error shows at first time when pressing first letter?</p>
  
  <p>here is my snippet :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('my-text').addEventListener('keypress',function(e){
      var myText = this.value;
      if(!just_persian(myText)){
          $("#error-nwl").text("change your keybord language to persian");
    this.style.boxShadow = "0px 0px 2px 1px #E25249";
     $("#error-nwl").css('color', '#ff6666');
          this.value = myText.substring(0, myText.length - 1);
    
      }
   else{
    $("#error-nwl").text("");
    this.style.boxShadow = "0px 0px 0px 0px"; 
    }
  });
  function just_persian(str){
      var p =  /^[\u0600-\u06FF\uFB8A\u067E\u0686\u06AF ]+$/;
      return p.test(str);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="error-nwl"&gt;&lt;/div&gt;
      &lt;form action="" method="post" name="myForm" class="newslside"&gt;
          &lt;input type="text" placeholder="register-name" id="my-text"/&gt;&lt;br/&gt;
      &lt;input class="submitnews" type="submit" value="send"&gt;
      &lt;/form&gt;
  
  
  
      
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>thanks</p>