Mask input text javascript

Have you tried this JQuery library?

link

It does exactly what you want. It does not validate the user's input, format the input text to enter the data with the mask that you pass.

In your case it would be instantiated in the following way:

$("#id_input").mask("aa-9999");

I do not understand what you mean by the word masquerade but I think your purpose is to validate that the text provided by the user through the input has the format you want, in this case it is something like "us-1234" or "us-2375" etc. To validate that a given string meets the required format you can use regular expressions.

The regular expression that models the previous format is the following:

^us-(\d{4})$

The above represents that at the beginning of the string there must be the letter u followed by a s and a hyphen and then 4 numbers between 0-9, the end of the string is the sign $.

So you can use this in your application you need to use it in the following way:

 exprZip = /^us-(\d{4})$/;   //tu expresión regular
 exprZip.test(textoInput);   //pruebas la expresión regular con la cadena que leiste del input y la función regresará true o false.

In the input you can use the attribute pattern next to a regular expression to ensure that the entry has the format you want. The downside is that it is not yet supported by all browsers: it will work for Chrome, Firefox, Opera or IE10 +, but it will not work well with Safari.

So what you should do is look for a regular expression that fits what you want. The idea would be something like this:

• 2 letters (which could be any or the ones you want, but this will complicate the regular expression)
• 1 script
• 5 digits (although in the question you say 4, the postal codes in the US have 5 digits)

So you could have a regular expression like this: ^[a-zA-Z]{2}-[0-9]{5}$ that combined with the attribute pattern would look like this:

<form>
  <input type="text" pattern="^[a-zA-Z]{2}-[0-9]{5}$" placeholder="ll-ddddd" />
  <button>Enviar</button>
</form>

Another option (if pattern does not work) would be doing it with JavaScript, with the same regular expression. When sending the form, it would be checked with JavaScript if the field meets the format you want and if not, an error message is displayed and it is not sent.

In JavaScript it would look like this:

document.getElementById("miform").addEventListener("submit", function(e) {
  var estado = document.getElementById("estado-cp").value;
  if (estado.match("^[a-zA-Z]{2}-[0-9]{5}$")) {
    alert("Cumple el patron");
  } else {
    alert("No cumple el patron");
    e.preventDefault(); // no se envia el formulario
  }
});

<form id="miform">
  <input type="text" id="estado-cp" />
  <button>Enviar</button>
</form>

Now, knowing that the number of states is limited (50) and that there are some special cases (territories, code for foreigners), you could limit even more the two letters that are admitted to simply those that are valid (eg: AL, AK, TX ...) and the regular expression could be like this:

^[AL|AK|AS|AZ|AR|CA|CO|CT|DE|DC|FL|GA|GU|HI|ID|IL|IN|IA|KS|KY|LA|ME|MD|MH|MA|MI|FM|MN|MS|MO|MT|NE|NV|NH|NJ|NM|NY|NC|ND|MP|OH|OK|OR|PW|PA|PR|RI|SC|SD|TN|TX|UT|VT|VA|VI|WA|WV|WI|WY]{2}-[0-9]{5}$