Validation Javascript pour n'accepter que des caractères utf-8

Question

J'ai un formulaire et je veux que les champs d'entrée de ce formulaire n'acceptent que le caractère UTF-8. Je n'ai aucune idée de comment puis-je y parvenir.Voici ma forme html. ! Merci d'avance ..

<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> 

Answer 1

Vous pouvez ajouter la validation à tous les champs de texte:

/* 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>