Javascript validation to accept only utf-8 characters

Question

I have a form and I want that form's input fields should accept only UTF-8 character.I have no idea how can i achieve this.Following is my html form .Any help !! Thanks in advance..

<form action="" method="post" id="myform">              

<fieldset id="address">
    <div class="required">
        <label for="firstName">
            <span class="required-indicator">* </span>
            <span>First Name</span>
        </label>
        <input class="input-text required" id="firstName" type="text" name="billto_firstname" value="" maxlength="50">
    </div>

    <div class="required">
        <label for="lastName">
            <span class="required-indicator">* </span>
            <span>Last Name</span>
        </label>

        <input class="input-text required" id="lastName" type="text" name="billto_lastname" value="" maxlength="50">
    </div>

    <div class="required">
        <label for="address1">
            <span class="required-indicator">* </span>
            <span>Address 1</span>
        </label>

        <input class="required" id="address1" type="text" name="billto_address1" value="" maxlength="50">
    </div>
</fieldset>

<fieldset>
    <div class="row-button">
        <button class="continue-button" type="submit" name="submit-form" onclick="this.submit()" value="Continue"><span>Continue </span></button>
    </div>              
</fieldset>
</form>

What do you mean by "utf8-8" character? UTF-8 is an encoding, not a restricted char set. Did you mean something like restricting input to ASCII chars or only Alphabet characters? — FelisCatus, Oct 01 '15 at 12:00

Buzinas · Answer 1 · 2015-10-01T12:45:08.833

You could add the validation to all your text fields:

/* When all the elements of the page are loaded */
document.addEventListener('DOMContentLoaded', function() {
  /* Regular expression to test if a string has only UTF-8 characters */
  var utf8 = /([\x00-\x7F]|([\xC2-\xDF]|\xE0[\xA0-\xBF]|\xED[\x80-\x9F]|(|[\xE1-\xEC]|[\xEE-\xEF]|\xF0[\x90-\xBF]|\xF4[\x80-\x8F]|[\xF1-\xF3][\x80-\xBF])[\x80-\xBF])[\x80-\xBF])*/g;

  /* Add the 'submit' event handler to the form */
  document.getElementById('myform').addEventListener('submit', function() {
    /* Get all the textfields */
    var txts = document.querySelectorAll('input[type=text]');

    /* Loop through them */
    for (var i = 0; i < txts.length; i++) {
      /* Look if it has only utf-8 characters */
      if (txts[i].value !== txts[i].value.match(utf8)[0]) {
        alert('The field should have only UTF-8 characters');
        break;
      }
    }
  });
});

<form action="" method="post" id="myform">

  <fieldset id="address">
    <div class="required">
      <label for="firstName">
        <span class="required-indicator">* </span>
        <span>First Name</span>
      </label>
      <input class="input-text required" id="firstName" type="text" name="billto_firstname" value="" maxlength="50">
    </div>

    <div class="required">
      <label for="lastName">
        <span class="required-indicator">* </span>
        <span>Last Name</span>
      </label>

      <input class="input-text required" id="lastName" type="text" name="billto_lastname" value="" maxlength="50">
    </div>

    <div class="required">
      <label for="address1">
        <span class="required-indicator">* </span>
        <span>Address 1</span>
      </label>

      <input class="required" id="address1" type="text" name="billto_address1" value="" maxlength="50">
    </div>
  </fieldset>

  <fieldset>
    <div class="row-button">
      <button class="continue-button" type="submit" name="submit-form" onclick="this.submit()" value="Continue"><span>Continue </span>
      </button>
    </div>
  </fieldset>
</form>

Your script is working but i want user to know why he not able to input that character.So want so text to be appeared ...@Buzinas — piya, Oct 01 '15 at 12:29
@piya Ok, I've edited my answer, so it works as you asked. Btw, the logic is there, feel free to modify it to achieve what you want, since the difficult part that was to validate the UTF-8 characters is already there. — Buzinas, Oct 01 '15 at 12:45
@piya and if my answer was useful for you, please, upvote it by clicking on the arrow, and mark it as the accepted answer by clicking on the `V` right below the upvote/downvote arrows. Thanks! :) — Buzinas, Oct 01 '15 at 12:45
Your previous 2 edits were working but the above latest edit is not working @Buzinas — piya, Oct 02 '15 at 06:03

Javascript validation to accept only utf-8 characters

1 Answers1