Home / Questions / 117469
Accepted
Ricardo Sauceda
Asked: 2020-11-15 18:00:34 +0800 CST 2020-11-15 18:00:34 +0800 CST

How can I validate that an INPUT TEXT does not accept special characters? ?!))$&.'!"@&

  • 772

I have a function:

<input class="tf w-input" id="txtMsj" name="txtMsj" maxlength="256" placeholder="Identificación" type="text">
<input class="bn naranja w-button"  onclick="goto('frm')" value="Siguiente">

goto( doc ){
var txtMsj  document.getElementById("txtMsj").value;
}

That helps me to get the text from the screen but I don't know how to validate the special characters -> [?!))$&.'!"@&] with regular expressions.

javascript

6 Answers

  1. Best Answer

    This is the solution I implemented:

    <input class="tf w-input" id="txtCurp" name="txtCurp" maxlength="256" onkeypress="return check(event)" placeholder="No. de CURP" type="text">

    function check(e) {
    tecla = (document.all) ? e.keyCode : e.which;

    //Tecla de retroceso para borrar, siempre la permite
    if (tecla == 8) {
        return true;
    }

    // Patrón de entrada, en este caso solo acepta numeros y letras
    patron = /[A-Za-z0-9]/;
    tecla_final = String.fromCharCode(tecla);
    return patron.test(tecla_final);
}
    • 9

  2. You can do it directly from HTML, thanks to the new HTML5 attributes:

    This field only accepts lowercase letters:

    <input type="text" name="user" placeholder="Usern" pattern="[a-z]{1,15}">

    This expression accepts letters, numbers and hyphens with a range of 1 to 15 characters:

    <input type="text" pattern="[A-Za-z0-9_-]{1,15}" name="user" placeholder="User">


    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="text" pattern="[A-Za-z0-9]{1,15}" name="" value="">
    <button type="button" name="button">click</button>
  </body>
</html>

    • 4

  3. Quick solution

    The first thing we need to do is add a class to our Input so we can then reference it from a function in Jquery.

    <div class="input-group">
   <label class="control-label">Precio:</label>
   <input type="number" id="precio" class="soloNumeros" min="1" />
</div>

    The min attribute is to indicate that 1 will be its minimum value, this way it will not accept negative values.

    The next step will be to create a script to prevent the user from typing symbols in the input.

    jQuery('.soloNumeros').keypress(function (tecla) {
  if (tecla.charCode < 48 || tecla.charCode > 57) return false;
});
    • 2

  4. If you want the input to only load uppercase and lowercase text, numbers and not accept special characters you can add to the input

    oninput="this.value = this.value.replace(/[^a-zA-Z0-9]/,'')"
    • 0 

  5. <!DOCTYPE html>
<html>
<style> 
input:invalid {border:red solid 3px;background-color:yellow;}
input:valid {background-color:white;}
input[required]{background-color:yellow;}
</style>
<body>
<p> Ejemplo poner una IP, ejemplo 10.10.10.10</p>
<p> El primero mostrara colores por input[required]</p>
<input type="text" onclick="goto()" required pattern="[0-9]{1,3}([.]?)[0-9]{1,3}\1[0-9]{1,3}\1[0-9]{1,3}">
<input type="text" onclick="goto()" pattern="[0-9]{1,3}([.]?)[0-9]{1,3}\1[0-9]{1,3}\1[0-9]{1,3}">
<script>
/*
Bucamos el que esta vacio y lo coloremos como tambien aplicamos focus 
*/
function goto(){
  const myTag = document.getElementsByTagName("input");
  for (let i = 0; i < myTag.length; i++) {
   if (!myTag[i].value) { myTag[i].style.backgroundColor = "yellow"; myTag[i].style.borderColor = "red"; myTag[i].focus(); return; } else { myTag[i].style.backgroundColor = "white"; myTag[i].style.borderColor = "black"; }
   }
}
</script>
</body>
</html>

    • 0

  6. // function to only accept numbers and decimal point

    function SoloNumerosDecimales(e) {

var key;

if (window.event) // IE/Crome
{
    key = e.keyCode;
}
else if (e.which) // Netscape/Firefox/Opera
{
    key = e.which;
}

if (key < 46 || key > 57) {
    return false;
}

return true;
}

    // function to only accept numbers

    function SoloNumeros(e) {

var key;

if (window.event) // IE/Crome
{
    key = e.keyCode;
}
else if (e.which) // Netscape/Firefox/Opera
{
    key = e.which;
}

if (key < 48 || key > 57 ) {
    return false;
}

return true;
}

    // function to only accept letters

    function SoloLetras(letra) {

tecla = (document.all) ? letra.keyCode : letra.which;

//Tecla de retroceso para borrar, y espacio siempre la permite
if (tecla == 8 || tecla == 32) {
    return true;
}

// Patrón de entrada
patron = /[A-Za-z]/;
tecla_final = String.fromCharCode(tecla);
return patron.test(tecla_final);

}

    // function to only accept letters and numbers

    function SoloLetrasAndNumeros(letranum) {

tecla = (document.all) ? letranum.keyCode : letranum.which;

//Tecla de retroceso para borrar, y espacio siempre la permite
if (tecla == 8 || tecla == 32) {
    return true;
}

// Patrón de entrada
patron = /[A-Za-z0-9]/;
tecla_final = String.fromCharCode(tecla);
return patron.test(tecla_final);

}
    • -2