setCustomValidity does not work

Navigation
0

Hello, good night, I am trying to modify the default message of the required attribute with the setCustomValidity but it does not take me that it could be ...

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();

       });
   })

Any help or improvement comment will be Welcome !!

Thank you very much !!

    
asked by Dan Lasauskas 03.01.2019 в 02:17
source

1 answer

3

You have something wrong:

1.- The for has to go up to i<inputs.length because if you do not get a last value undefined (remember that you start at 0)

2.- validity is not a variable, it is a property of your object inputs[i] : 

inputs[i].validity.valueMissing

!inputs[i].validity.valid

Here is a working example: 

'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>
    
answered by 03.01.2019 в 08:24
Choose an array element randomly Format Textbox in C # for WPF project