Adapt formatting of input

Asked

Viewed 592 times

2

I have an input field where I want the user to enter the license plate of the car in the following format "11-22-dd ".

How do I make the form invalid if the value sent does not follow that specific format? Or how do I make the user be required to write in that format?

html css
  • 1

    The element <input> has the attribute pattern that you can enter a regular expression to validate the field value. Want to try?

  • Check out this link, here’s what you’re looking for: https://answall.com/questions/182118/como-usar-o-attribute-pattern

3 answers

4


You can use the attribute pattern and required (both HTML5). The required will prevent the submission of the form if nothing is entered in the field, and the pattern will prevent sending the form if the value does not follow the standard of the specified regular expression.

From what I understood, the format would be 2 numbers + 2 numbers + 2 lower case letters, separated by hyphen. The regular expression would be:

\d{2}-\d{2}-[a-z]{2}

Would look like this:

<form>
   <input type="text" pattern="\d{2}-\d{2}-[a-z]{2}" required>
   <br>
   <button>Enviar</button>
</form>

Although the regex no pattern requires that the value of the field is in the specified format, Submit accepts the empty field, so it is necessary the required also.

Validating with Javascript

Another way is to check the field with Javascript, without using HTML5 attributes. The logic is basically the same, just check if the field value meets the regular expression. In this case, the delimiters must be included in the regex ^ (string start) and $ (string end), otherwise it would accept something like 11-22-aas or 111-22-aa:

document.addEventListener("DOMContentLoaded", function(){
   
   document.forms[0].onsubmit = function(e){
      
      var campo = document.forms[0].registro.value;
      
      if(!/^\d{2}-\d{2}-[a-z]{2}$/.test(campo)){
         e.preventDefault(); // aborta o submit
         alert("Valor inválido");
      }
      
   }
   
});
<form>
   <input type="text" name="registro">
   <br>
   <button>Enviar</button>
</form>

  • It is important to use the Placeholder to show the user that there is a mask to be respected.

2

One option is to use the plugin jquery mask, see an example below:

$(document).ready(function(){
  $('.placa').mask('00-00-AA');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js"></script>


<input class="placa">

  • 1

    Maybe he’s not using jQuery.

1

With the library Jquery Mask you can have a much better interaction than HTML5 with the pattern because then you do not warn the user that has a mask.

Already with the library is a much better IHC:

   $(document).ready(function(){
      $('#data').mask('dd-mm-aa');
    })

   <input id="data" placeholder="dd-mm-aa">

Important to use Placeholder to show how the mask would look.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.