validate Empty fields with javaScript

Question

validate Empty fields with javaScript

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (-1 votes)

0

I have a function in JavaScript that is validateFor () (validateFormulario), where you check that the email addresses entered in the form are correct, and also check that no field is empty, where I have the problem here, not you execute it to that IF.

function validarfor(){

var correo = document.getElementById("mail").value; 
var nom = document.getElementsByName("nombres")[0].value;
var rs = document.getElementsByName("razonsocial")[0].value;
var tel = document.getElementsByName("telefono")[0].value;
var cel = document.getElementsByName("celular")[0].value;
var coment = document.getElementsByName("comentarios")[0].value;

var expr = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;


if ( !expr.test(correo) ){                                                            //COMPRUEBA MAIL
    alert("Error: La dirección de correo " + correo + " es incorrecta.");
    return false;
}

if ((correo == "") || (nom == "") || (rs == "") || (tel == "") || (cel == "") || (coment == "")) {  //COMPRUEBA CAMPOS VACIOS
    alert("Los campos no pueden quedar vacios");
    return true;
}

}

I stored the variables with getElementByID, getElementsByName and I do not know where the problem is, also in the conditional instead of putting (mail == "") try with (mail.lenght == 0) and neither!

Form:

<FORM name="formulario" action="#" method="post" onSubmit="return validarfor();">
    <p>Destinatario:</p>     
    <SELECT NAME="lista">
    <OPTION SELECTED>Sr
    <OPTION>Sra.
    </SELECT>
    <br>

    <label for="nombres"><p>*Apellido y nombre: </p></label><br>
    <INPUT TYPE="text"  id="nombres" name="nombres">
    <br>

    <label for="razonsocial"><p>*Razon Social:</p></label>
    <INPUT class="razon" TYPE="text"  id="razonsocial" name="razonsocial">
    <br>

    <label for="mail"><p>*Email:</p></label>
    <INPUT TYPE="email" id="mail">
    <br>

    <label for="telefono"><p>*Telefono:</p></label>
    <INPUT TYPE="tel"  id="telefono" name="telefono">
    <br>

    <label for="celular"><p>*Celular:</p></label>
    <INPUT TYPE="tel"  id="celular" name="celular">
    <br>

    <p>Via de contacto:</p>
    <SELECT NAME="viadecontacto" >
    <OPTION SELECTED>Email
    <OPTION>Telefono
    <OPTION>Celular
    </SELECT>
    <br>

    <label for="comentarios"><p>*Comentarios:</p></label>
    <textarea  id="comentarios" rows="10" cols="40" maxlength="300" name="comentarios">Escribe aquí tus comentarios</textarea>
    <br>

    <input type="submit" name="commit" value="Enviar">
</form>

javascript html

asked by Ibarra Emiliano 27.10.2017 в 21:20

source

3 answers

Error trying to send data from one activity to another with intent in android Return list by WCF

score 1 · Answer 1

function validaVacio(valor) {
        valor = valor.replace("&nbsp;", "");
        valor = valor == undefined ? "" : valor;
        if (!valor || 0 === valor.trim().length) {
            return true;
            }
        else {
            return false;
            }
        }

    function validarfor(){
    
    var correo = document.getElementById("mail").value; 
    var nom = document.getElementsByName("nombres")[0].value;
    var rs = document.getElementsByName("razonsocial")[0].value;
    var tel = document.getElementsByName("telefono")[0].value;
    var cel = document.getElementsByName("celular")[0].value;
    var coment = document.getElementsByName("comentarios")[0].value;
    
    var expr = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    
    
    if ( !expr.test(correo) ){                                                            //COMPRUEBA MAIL
        alert("Error: La dirección de correo " + correo + " es incorrecta.");
        return false;
    }
    
    if ( validaVacio(correo.value) || validaVacio(nom.value) || validaVacio(rs.value) || validaVacio(tel.value) || validaVacio(cel.value) || validaVacio(coment.value)) {  //COMPRUEBA CAMPOS VACIOS
        alert("Los campos no pueden quedar vacios");
        return false;
    }
    return true;
    }

<FORM name="formulario" action="#" method="post" onSubmit="return validarfor();">
    <p>Destinatario:</p>     
    <SELECT NAME="lista">
    <OPTION SELECTED>Sr
    <OPTION>Sra.
    </SELECT>
    <br>

    <label for="nombres"><p>*Apellido y nombre: </p></label><br>
    <INPUT TYPE="text"  id="nombres" name="nombres">
    <br>

    <label for="razonsocial"><p>*Razon Social:</p></label>
    <INPUT class="razon" TYPE="text"  id="razonsocial" name="razonsocial">
    <br>

    <label for="mail"><p>*Email:</p></label>
    <INPUT TYPE="email" id="mail">
    <br>

    <label for="telefono"><p>*Telefono:</p></label>
    <INPUT TYPE="tel"  id="telefono" name="telefono">
    <br>

    <label for="celular"><p>*Celular:</p></label>
    <INPUT TYPE="tel"  id="celular" name="celular">
    <br>

    <p>Via de contacto:</p>
    <SELECT NAME="viadecontacto" >
    <OPTION SELECTED>Email
    <OPTION>Telefono
    <OPTION>Celular
    </SELECT>
    <br>

    <label for="comentarios"><p>*Comentarios:</p></label>
    <textarea  id="comentarios" rows="10" cols="40" maxlength="300" name="comentarios">Escribe aquí tus comentarios</textarea>
    <br>

    <input type="submit" name="commit" value="Enviar">
</form>

score 0 · Answer 2

If the only thing you need is to not send if the field is empty, you can use the attribute required the sitaxis you have to use is the following:

<INPUT TYPE="text"  id="nombres" name="nombres" required>

And you have to consider is the degree of compatibility with browsers which you can check in the following official link:

Supported browsers

Your code would be as follows, you can add in action the save function or whatever you require after the submit

<!--<FORM name="formulario" action="JavaScript:guarDadatos()">  -->
<FORM name="formulario">
    <p>Destinatario:</p>     
    <SELECT NAME="lista" required>
    <OPTION SELECTED>Sr
    <OPTION>Sra.
    </SELECT>
    <br>

    <label for="nombres"><p>*Apellido y nombre: </p></label><br>
    <INPUT TYPE="text"  id="nombres" name="nombres" required>
    <br>

    <label for="razonsocial"><p>*Razon Social:</p></label>
    <INPUT class="razon" TYPE="text"  id="razonsocial" name="razonsocial" required>
    <br>

    <label for="mail"><p>*Email:</p></label>
    <INPUT TYPE="email" id="mail" required>
    <br>

    <label for="telefono"><p>*Telefono:</p></label>
    <INPUT TYPE="tel"  id="telefono" name="telefono"required>
    <br>

    <label for="celular"><p>*Celular:</p></label>
    <INPUT TYPE="tel"  id="celular" name="celular"required>
    <br>

    <p>Via de contacto:</p>
    <SELECT NAME="viadecontacto"required >
    <OPTION SELECTED>Email
    <OPTION>Telefono
    <OPTION>Celular
    </SELECT>
    <br>

    <label for="comentarios"><p>*Comentarios:</p></label>
    <textarea  id="comentarios" rows="10" cols="40" maxlength="300" name="comentarios" >Escribe aquí tus comentarios</textarea>
    <br>

    <input type="submit" name="commit" value="Enviar">
</form>

score -1 · Answer 3

It should work for you by changing the return true after the message by return false .

Look at this example:

function validarfor(){

var correo = document.getElementById("mail").value; 
var nom = document.getElementsByName("nombres")[0].value;
var rs = document.getElementsByName("razonsocial")[0].value;
var tel = document.getElementsByName("telefono")[0].value;
var cel = document.getElementsByName("celular")[0].value;
var coment = document.getElementsByName("comentarios")[0].value;

var expr = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;


if ( !expr.test(correo) ){                                                            //COMPRUEBA MAIL
    alert("Error: La dirección de correo " + correo + " es incorrecta.");
    return false;
}

if ((correo == "") || (nom == "") || (rs == "") || (tel == "") || (cel == "") || (coment == "")) {  //COMPRUEBA CAMPOS VACIOS
    alert("Los campos no pueden quedar vacios");
    return false;
}

}

<form name="formulario" action="#" method="post" onSubmit="return validarfor();">
    <p>Destinatario:</p>     
    <SELECT NAME="lista">
    <OPTION SELECTED>Sr</OPTION>
    <OPTION>Sra.</OPTION>
    </SELECT>
    <br>

    <label for="nombres"><p>*Apellido y nombre: </p></label><br>
    <INPUT TYPE="text"  id="nombres" name="nombres"/>
    <br>

    <label for="razonsocial"><p>*Razon Social:</p></label>
    <INPUT class="razon" TYPE="text"  id="razonsocial" name="razonsocial"/>
    <br>

    <label for="mail"><p>*Email:</p></label>
    <INPUT TYPE="email" id="mail"/>
    <br>

    <label for="telefono"><p>*Telefono:</p></label>
    <INPUT TYPE="tel"  id="telefono" name="telefono"/>
    <br>

    <label for="celular"><p>*Celular:</p></label>
    <INPUT TYPE="tel"  id="celular" name="celular"/>
    <br>

    <p>Via de contacto:</p>
    <SELECT NAME="viadecontacto" >
    <OPTION SELECTED>Email</OPTION>
    <OPTION>Telefono</OPTION>
    <OPTION>Celular</OPTION>
    </SELECT>
    <br>

    <label for="comentarios"><p>*Comentarios:</p></label>
    <textarea  id="comentarios" rows="10" cols="40" maxlength="300" name="comentarios">Escribe aquí tus comentarios</textarea>
    <br>

    <input type="submit" name="commit" value="Enviar"/>
</form>