Pues hice un par de cambios en el JS y dejo entonces el html:
Código HTML:
Ver original<!DOCTYPE html>
<link rel="stylesheet" href="css/style.css"> <form name="welcome" method="post"> <input type="text" name="fname" placeholder="your name here" pattern="[A-Za-z]" required> <input type="text" name="lname" placeholder="your lastname here" pattern="[A-Za-z]" required> <input type="text" name="age" placeholder="your age here" pattern="[0-9]"> <input type="radio" name="female" value="female"><span>Female
</span> <div class="button-wrapper"> <input type="button" name="send" value="Send" class="button-send">
Ahora, el JS:
Código Javascript
:
Ver originalfunction init() {
document.welcome.addEventListener('invalid', validate, true);
document.querySelector('.button-send').addEventListener('click', send, false);
}
function validate(e) {
var el = e.target;
var elem = {
name : document.querySelector("input[name='fname']"),
lname: document.querySelector("input[name='lname']"),
age : document.querySelector("input[name='age']"),
mail : document.querySelector("input[name='mail']")
};
var sel = {
name : document.getElementById('name-err'),
lname: document.getElementById('lname-err'),
age : document.getElementById('age-err'),
mail : document.getElementById('mail-err')
};
if(el.validity.valueMissing){
if(el.name == elem.name.name) {
sel.name.classList.add('flash');
sel.name.innerHTML = "<p>Please fill the empty field<p>";
} else if(el.name == elem.lname.name){
sel.lname.classList.add('flash');
sel.name.innerHTML = "<p>Please fill the empty field<p>";
} else if(el.name == elem.age.name){
sel.age.classList.add('flash');
sel.name.innerHTML = "<p>Please fill the empty field<p>";
} else {
sel.mail.classList.add('flash');
sel.name.innerHTML = "<p>Please fill the empty field<p>";
}
}
else if(el.validity.typeMissMatch){
if(el.name == elem.main.name)
sel.mail.classList.add('flash');
sel.mail.innerHTML = "<p>Please enter a valid mail<p>";
}
else if(el.validity.patternMissMatch){
if(el.name == elem.name.name) {
sel.name.classList.add('flash');
sel.name.innerHTML = "<p>Please, insert just text<p>";
} else if(el.name == elem.lname.name){
sel.lname.classList.add('flash');
sel.name.innerHTML = "<p>Please, insert just text<p>";
} else if(el.name == elem.age.name){
sel.age.classList.add('flash');
sel.name.innerHTML = "<p>Sure is your age?<p>";
}
} else {
console.log('Algo está mal .... ');
console.log(el);
}
}
function send(){
var valid = document.welcome.checkValidity();
if(valid){
document.welcome.submit();
} else {
console.log('nooope');
};
}
window.addEventListener('load', init, false);
Bien, el tema con el document.welcome era que en el evento de carga que inicializaba todo tenía mal referenciada la clase init... todo listo por ese lado.
Hice un par de logs tontos para saber si se saltaba los condicionales y, en efecto, se los salta...
De hecho al interactuar con los campos no pasa gran cosa, de hecho no pasa nada, no muestra los mensajes no cambia en absolutamente nada (cosa que en teoría debería ocurrir a medida que te vas equivocando en los campos).
Si trato de enviar el formulario sin llenar los cambios, efectivamente me dispara el log que le puse. Si relleno los campos mal, me lanza los logs (menos el de email...) y luego, obviamente el 'nooope' tonto de pruebas.
En fin, al menos ya comprobé que las referencias para hacer las comparaciones son correctas, logeando el.name me devuelve el valor de name y así... ¿Qué está mal entonces en el script? Es mi pregunta ahora
Edito:
Ah! Se me olvidaba poner los logs, claro
Código Javascript
:
Ver original"Algo está mal .... "
<input type="text" required="" pattern="[A-Za-z]" placeholder="your name here" name="fname">
"Algo está mal .... "
<input type="text" required="" pattern="[A-Za-z]" placeholder="your lastname here" name="lname">
"Algo está mal .... "
<input type="text" pattern="[0-9]" placeholder="your age here" name="age">
"nooope"