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>

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>

• javascript
• utf-8
• restrict

Share Improve this question Follow edited Oct 1, 2015 at 12:12 piya asked Oct 1, 2015 at 11:58 piyapiya 20511 gold badge77 silver badges1515 bronze badges 3

• 2 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 Commented Oct 1, 2015 at 12:00
• Where did i mentioned utf8-8 ? @ FelisCatus – piya Commented Oct 1, 2015 at 12:11
• Tags have been removed @Epodax – piya Commented Oct 1, 2015 at 12:13

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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>