0

Hola buenas noches estoy tratando de modificar el mensaje default del atributo required con el setCustomValidity pero no me lo toma que podria ser...

HTML:

          <form name="info" method="GET" id="caja-form">
              <h1>CONTACTANOS</h1>

            <fieldset>
              <input type="text" name="nombre" placeholder="Nombre" id="nombre" required>
            </fieldset>  

              <fieldset>
                <input type="email" name="mail" placeholder="Email" id="correo" required>
              </fieldset>

              <fieldset>
                <input type="text" name="subject" placeholder="Asunto" id="asunto" required>
              </fieldset>

              <fieldset>
                <textarea placeholder="Mensaje" name="msg"maxlength="140" rows="5" id="mensaje" required></textarea>
              </fieldset>

              <fieldset>
                <button name="submit"  type="submit" id="enviar" value="ingresar">ENVIAR</button>  
              </fieldset>

          </form>

JS:

   'use strict'

   window.addEventListener("load", function() {

       function checkImputs(){
           var inputs = document.getElementsByTagName('input');

           for(var i= 0; i<=inputs.length; i++){  

               if(inputs[i].value=='' && inputs[i] == validity.valueMissing && inputs[i] != validity.valid){
                   inputs[i].setCustomValidity("Todos los campos son obligatorios");                                        
               }else{
                   inputs[i].setCustomValidity("");

               }

           }   


       }  

       var enviar = document.querySelector("#enviar");
               enviar.addEventListener("click", function(){
               return checkImputs();

       });
   })

Cualquier ayuda o comentario de mejora sera Bienvenido!!

Muchas Gracias!!

1 respuesta 1

3

Tienes alguna cosa mal:

1.- El for tiene que ir hasta i<inputs.length porque si no vas a obtener un último valor undefined (recuerda que empiezas en 0)

2.- validity no es una variable, es una propiedad de tu objeto inputs[i]:

inputs[i].validity.valueMissing

!inputs[i].validity.valid

Te dejo aquí un ejemplo funcionando:

'use strict'

   window.addEventListener("load", function() {

       function checkImputs(){
           let inputs = document.getElementsByTagName('input');

           for(var i= 0; i<inputs.length; i++){  
               if(inputs[i].value=='' && inputs[i].validity.valueMissing && !inputs[i].validity.valid){                   inputs[i].setCustomValidity("Todos los campos son obligatorios"); 
               }else{
                   inputs[i].setCustomValidity("");
               }
           }   
       }  

       let enviar = document.querySelector("#enviar");
               enviar.addEventListener("click", function(){
               return checkImputs();
       });
   })
<form name="info" method="GET" id="caja-form">
              <h1>CONTACTANOS</h1>

            <fieldset>
              <input type="text" name="nombre" placeholder="Nombre" id="nombre" required>
            </fieldset>  

              <fieldset>
                <input type="email" name="mail" placeholder="Email" id="correo" required>
              </fieldset>

              <fieldset>
                <input type="text" name="subject" placeholder="Asunto" id="asunto" required>
              </fieldset>

              <fieldset>
                <textarea placeholder="Mensaje" name="msg"maxlength="140" rows="5" id="mensaje" required></textarea>
              </fieldset>

              <fieldset>
                <button name="submit"  type="submit" id="enviar" value="ingresar">ENVIAR</button>  
              </fieldset>

          </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.