0

Tengo esta form que pide al usuario que de 4 numeros distintos del 0 al 9, pero necesito que de un mensaje de error cuando no pone ningun numero o repite alguno

<form action="/play" method="post" style="margin-top: 50px;" id="abcd">
    <input id="a" autocomplete="off" autofocus class="form-control" name="a" type="number" min="0" max="9" style="width: 7%"> </form>

Necesito que solamente se pueda enviar cuando esta funcion devuelve verdadero, como puedo hacer?

function validate(){

            var a;
            var b;
            var c;
            var d;
            a =document.getElementById('a').value;
            b=document.getElementById('b').value;
            c=document.getElementById('c').value;
            d=document.getElementById('d').value;

            if ( a ==="" || b==="" || c ==="" || d==="" ) {
                document.getElementById("demo").innerHTML = "You must provide 4 numbers";
                return false;
            }
            else if ( a === b || a === c || a === d || b === c || b === d || c === d){
                document.getElementById("demo").innerHTML = "Each digit can appear at most once.";
                return false;
            }
            else{
                document.getElementById("demo").innerHTML = "";
                return true;
            }
        }

2 respuestas 2

1

Uno de los detalles que encontraras es que en JavaScript el replace solo quita una ocurrencia (la primera mira aquí); ahora con expresiones regulares puedes quitar las que existan, sin embargo como es un dato dinámico (hoy día) ignoro como sería.

Lo primero es que a tu form le agreges onsumbit mediante el cual controlaras si se envía o no tu formulario en base a el 'true' o false de una función que hay que colocar alli. Tu form quedaria (a mi sugerencia) de la siguiente forma:

<form [lo que a tu consideración debe llevar] onsubmit="return miFuncionValidacion()">
<!-- aqui tu código -->
</form>

Ahora bien miFuncionValidacion debe ser (en estructura similar):

function miFuncionValidacion() {

   /* Todo tu proceso para determinar devolver true o false */

   return [segun corresponda serà true o false];

}

Ahora para las condiciones que deseas; tomando tu código y observando estas usando solo JavaScript:

function miFuncionValidacion(){
   /* En una sola variable ponemos todo */
   var cadenaGeneral = document.getElementById('a').value +document.getElementById('b').value +document.getElementById('c').value +document.getElementById('d').value

   /* A continuación asumo que cada input solo permite y solo número, no diez, once, mil, etc. */
   /* Como son 4 numero su longitud debe ser igual a 4 :D */
   if (cadenaGenera.length!=4) /* Aqui le puedes poner sea igual, menor... */
   {
      return false;
   }
   else {
      /* Verificamos que lo contenido en "a" no se repita */
      /* Para esto usaremos split usando como separador lo contenido en "a"
         y join poniendo para "separar" cadena vacia y verificamos su longitud sea 3 */
      if ((cadenaGeneral.split(document.getElementById('a').value)).join("").length!=3)
      {
         return false;
      } else if ((cadenaGeneral.split(document.getElementById('b').value)).join("").length!=3)
      {
         return false;
      } /* Así para los otro 2 */
      /* finalmente */
      else {
         document.getElementById("demo").innerHTML = "";
         return true; // Todo bien
      }
   }


}
1
  • Muchas gracias!! Muy clara la explicacion :D Commented el 5 jul. 2020 a las 6:40
0

primero el form debes entregarle un boton tipo submit y capturar el evento onsubmit y asignarle tu funcion validate:

<form action="/play" method="post" style="margin-top: 50px;" id="abcd" onsubmit="validate">
    <input id="a" autocomplete="off" autofocus class="form-control" name="a" type="number" min="0" max="9" style="width: 7%"> 
    <input type="submit" value="Enviar" />
</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.