Display error message when typing phone

Question

I have a form and I need this field

<label class="labVal210Esq">Telefone:
<input type="text" class="val120Dir"
name="TxtTelefone" /> </label>

In case it is the phone, it displays the following error messages: If the user enters less than 8 digits that an error message appears, a alert("Telefone tem de ter 8 dígitos!").

If the user type "-" which is an invalid character, an Alert with = alert("Carácter inválido, somente dígitos).

And if the number is valid (8 digits) nothing appears.

My code:

function VerificaTelef (ident, campo) {
var i, c;
var strTel = campo.value;
if ( strTel.length !=8 ){
alert ("Telfone tem de ter 8 dígitos!");
return false;
}
for (i = 0; i < 8; i++ ){
c = strTel.charAt (i);}
if ( (c < '0') || (c > '9')){
alert("Telefone só pode ter 8 dígitos");
return false;
}}
return true;
}

It’s not working out.

The reference in HTML for javascript has to be by onKeyup if possible, because javascript has to check after the user type.

Sincerely yours,

Gabriel

Answer 1

I suggest using browser-supported validation. This only works if the browser supports HTML5

<form>
<input type="tel" name="telefone" maxlength="8" minlength="8" 
       pattern="[0-9]*" title="Digite apenas números">
<input type="submit">
</form>

To use something more complete or different you can continue to use the onchange event with this automatic validation:

<form>
<input type="tel" name="telefone" maxlength="8" minlength="8" 
       pattern="[0-9]*" title="Digite apenas números" onchange="if(!this.validity.valid)alert('O telefone não é válido')">
<input type="submit">
</form>

Answer 2

You can do it like this:

document.getElementById('telefone').onblur = function() {
  validaTel(this);
};

function validaTel(el) {
  if (el.value.length < 8) {
    alert("Telefone tem de ter 8 dígitos!");
  } else if (el.value.length > 8) {
    alert("Telefone só pode ter 8 dígitos");
  }
}

<input type="text" id="telefone">

Remembering that it is more convenient to limit the size by html using maxlength, and using onblur prevents you to show the message every time during typing.

Answer 3

To complement I will leave a more complete version of the reply from @Gabrielrodrigues.

I did using the jQuery Mask plugin, I believe that increases the usability of the field since it is already formatted, in addition it also "prohibits" that letters or any character that is not typed.

jQuery("input.telefone")
  .mask("(99) 9999-9999?9")
  .focusout(function(event) {
    var target, phone, element;
    target = (event.currentTarget) ? event.currentTarget : event.srcElement;
    phone = target.value.replace(/\D/g, '');
    element = $(target);
    element.unmask();
    if (phone.length > 20) {
      element.mask("(99) 99999-999?9");
    } else {
      element.mask("(99) 9999-9999?9");
    }
  });

document.getElementById('telefone').onblur = function() {
  validaTel(this);
};

function validaTel(el) {
  if (el.value.length < 11) {
    alert("Telefone tem de ter 11 dígitos!");
  } else if (el.value.length > 20) {
    alert("Telefone só pode ter 11 dígitos");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://digitalbush.com/wp-content/uploads/2014/10/jquery.maskedinput.js"></script>
Telefone:
<input type="text" class="telefone" id="telefone">

Answer 4

Guys, I got it! I used @Bruno Costa’s reply and @Gabriel Rodrigues’s Js. Just like that:

<input type="text" id="telefone" value="12345678" onchange="if(!this.validity.valid)alert('O telefone só pode conter dígitos'); if(value.length < 8) 
    alert('Telefone tem de ter 8 dígitos!');" type="tel" name="telefone" pattern="[0-9]*" class="val120Dir">