Estoy realizando un formulario del que, una vez rellenado, y clickado en Enviar debe validar si los input son correctos o no. Los input ya disponen de una llamada a su función cada vez que salen del foco, pero quiero realizar la validación al intentar enviar.
El código HTML es:
<form id="formulario">
<fieldset>
<legend>Datos para enviar</legend>
<ul>
<li>
<label for="nombre">Introduce tu nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="escribe tu nombre" onchange="noVacio(this)">
</li>
<li>
<label for="email">Introduce tu email</label>
<input type="email" id="email" name="email" placeholder="escribe tu email" onchange="validarEmail(this)">
</li>
<li>
<label for="message">Introduce el mensaje que desees:</label>
<textarea name="message" id="message" placeholder="Escribe tu mensaje" onchange="validarMensaje(this,50)"></textarea>
</li>
<li>
<label for="contrasena">Introduce la contraseña</label>
<input type="password" name="contrasena" id="contrasena" placeholder="escribe tu contraseña" onchange="validar_clave(this)">
</li>
<li>
<label for="contrasena2">Introduce de nuevo la contraseña</label>
<input type="password" name="contrasena2" id="contrasena2" placeholder="escribe tu contraseña" onchange="claveCorrecta(contrasena, this)">
</li>
</ul>
<button id="inputsubmit" type="submit" class="formsubmit" onclick="verificar()">Enviar</button>
<button id="inputreset" type="reset" class="formreset">Borrar datos</button>
</fieldset>
</form>
Y el JavaScript:
function noVacio(elem){
var cadena = elem.value;
if(cadena == null || cadena.length == 0){
alert("Introduzca un valor, el campo es obligatorio.");
return false;
}else {
return true;
}
}
function longitud(elem, long) {
var cadena = elem.value;
var long = parseInt(long);
if (cadena.length >= long) {
alert("El campo supera los "+ long + " caracteres de máximo.");
return false;
} else {
return true;
}
}
function esCorreoE(elem) {
var cadena = elem.value;
cadena = cadena.toLowerCase();
if (cadena.indexOf("@") > 1) {
var addr = cadena.substring(0, cadena.indexOf("@"));
var dominio = cadena.substring(cadena.indexOf("@") + 1, cadena.length);
if (dominio.indexOf(".") == -1) {
alert("Verifica que el dominio sea correcto");
return false;
}
for (var i = 0; i < addr.length; i++) {
unCaracter = addr.charAt(i).charCodeAt(0);
if ((i == 0 && (unCaracter == 45 || unCaracter == 46)) || (i == addr.length - 1 && unCaracter == 46)) {
alert("Verifica la porción del nombre de usuario");
return false;
}
if (unCaracter == 45 || unCaracter == 46 || unCaracter == 95 || (unCaracter > 47 && unCaracter < 58) ||
(unCaracter > 96 && unCaracter < 123)) {
continue;
} else {
alert("Verifica la porción del nombre de usuario.");
return false;
}
}
for (i = 0; i < dominio.length; i++) {
unCaracter = dominio.charAt(i).charCodeAt(0);
if ((i == 0 && (unCaracter == 45 || unCaracter == 46)) || ((i == dominio.length - 1 || i == dominio.length - 2) &&
unCaracter == 46)) {
alert("Verifica el dominio de la dirección.");
return false;
}
if (unCaracter == 45 || unCaracter == 46 || unCaracter == 95 || (unCaracter > 47 && unCaracter < 58) ||
(unCaracter > 96 && unCaracter < 123)) {
continue;
} else {
alert("Verifica el dominio de la dirección.");
return false;
}
}
return true;
}
alert("La dirección de correo no está correctamente formateada. Por favor, compruébala.");
return false;
}
function validar_clave(elem)
{
var contrasenya = elem.value;
//La contraseña deberá tener al menos 10 valores, sino alert
if(contrasenya.length >= 6)
{
var minuscula = false;
var mayuscula = false;
var numero=false;
//Hacemos un bucle para ver si existe, al menos, una minuscula y dos simbolos
for(var i = 0;i<contrasenya.length;i++)
{
if(contrasenya.charCodeAt(i) >= 97 && contrasenya.charCodeAt(i) <= 122)
{
minuscula = true;
}
else if(contrasenya.charCodeAt(i) >= 65 && contrasenya.charCodeAt(i) <= 90)
{
mayuscula = true;
}
else if(contrasenya.charCodeAt(i) >= 48 && contrasenya.charCodeAt(i) <= 57){
numero = true;
}
}
}
//Si no encontramos ninguna minuscula, alert
if(minuscula != true){
alert("La contraseña no incluye ninguna minúscula");
}
//Si no encontramos ningun simbolo
if(mayuscula != true){
alert("La contraseña no incluye ninguna mayúscula");
}
if(numero != true){
alert("La contraseña debe algún dígito");
}
//Si tiene lo solicitado, true
if(minuscula == true && mayuscula == true && numero == true)
{
return true;
}
else{
alert("La contraseña debe incluir, al menos, 6 caracteres");
}
return false;
}
function claveCorrecta (elem1, elem2){
var contrasenya1 = elem1.value;
var contrasenya2 = elem2.value;
if(contrasenya1 != contrasenya2){
alert("No ha introducido la misma contraseña, vuelva a intentarlo");
return false;
} else {
return true;
}
}
function validarEmail(elem){
noVacio(elem);
esCorreoE(elem);
}
function validarMensaje(elem, long){
noVacio(elem);
longitud(elem,long);
}
function verificar(){
if(noVacio("nombre")==false ){
return false;
}
if(noVacio("email")==false || esCorreoE("email")==false){
return false;
}
if(noVacio("message")==false || logitud("message", 50)==false){
return false;
}
if(validar_clave("contrasenya1")==false ){
return false;
}
if(claveCorrecta("contrasenya1","contrasenya2")==false ){
return false;
}
}
Me gustaría saber si hay algún método que pueda adjuntar en la función verificar() del minal que en vez de retornar un false, retornarse la detención del proceso de envío al servidor. Solamente puede ser enviado si todo los campos son válidos. ¿Alguien me ilumina?