___ ___ erkimt Show error message when entering phone ______ qstntxt ___

I have a form and I need this field

%pre%

In case it is the phone, it will display the following error messages: If the user types less than 8 digits, an error message appears, a %code% .

If the user types "-" which is an invalid character, an alert with = %code%

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

My code:

%pre%

It's not working.

The reference in the HTML to the javascript has to be by onKeyup if possible, as the javascript has to check after the user types.

Sincerely,

Gabriel

    
______ azszpr127718 ___

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

%pre%

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

%pre%
    
______ azszpr127721 ___

You can do this:

%pre% %pre%

Remembering that it is more practical to limit size by html using maxLength, and using onblur prevents it from showing the message at all times when typing.

    
______ azszpr127729 ___

To complement, I'll leave a more complete version of @GabrielRodrigues' answer.

I made using the jQuery Mask Plugin , I believe it increases the usability of the field since it already comes formatted, in addition it it also "prohibits" any letters or any non-digit characters from being typed.

%pre% %pre%
    
______ azszpr127738 ___

I got it! I used the answer from @Bruno Costa and Js from @Gabriel Rodrigues. It just looks like this:

%pre%     
___

Navigation
2

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 will display the following error messages: If the user types less than 8 digits, an error message appears, a alert("Telefone tem de ter 8 dígitos!") .

If the user types "-" 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.

The reference in the HTML to the javascript has to be by onKeyup if possible, as the javascript has to check after the user types.

Sincerely,

Gabriel

    
asked by anonymous 10.05.2016 / 15:07

4 answers

1

I suggest using the validation supported by the browser itself. 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>
    
10.05.2016 / 15:30
1

You can do 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 practical to limit size by html using maxLength, and using onblur prevents it from showing the message at all times when typing.

    
10.05.2016 / 15:35
1

To complement, I'll leave a more complete version of @GabrielRodrigues' answer.

I made using the jQuery Mask Plugin , I believe it increases the usability of the field since it already comes formatted, in addition it it also "prohibits" any letters or any non-digit characters from being 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><scriptsrc="http://digitalbush.com/wp-content/uploads/2014/10/jquery.maskedinput.js"></script>
Telefone:
<input type="text" class="telefone" id="telefone">
    
10.05.2016 / 15:57
0

I got it! I used the answer from @Bruno Costa and Js from @Gabriel Rodrigues. It just looks like this: 

<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">
    
10.05.2016 / 16:13
Doubt when declaring enum with string [duplicate] How to avoid conflicts in jquery libraries?