email html5 para validar

[roboty]

Uso html5 con el tipo de campo email para validar un formulario con su campo email pero resulta que si el usuario al escribir su email pone un espacio en blanco al final o principio se pone el campo en rojo como que no es valido como podria solucionar esto.

Código Javascript:

<input name="email" id="email" type="email" placeholder="inserta email">
 

es posible tambien crear un onblur con una funcion para validar el campo en caso de que no acepte el navegador el tipo email?

Saludos

[petit89]

Usalo asi:

Código HTML:

<input name="email" id="email" type="email" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" placeholder="inserta email">
 

[Alexis88]

El <input> de tipo email, evalúa internamente el valor ingresado, comparándolo con una expresión regular que se menciona en la documentación existente. Por tal motivo, lo que podrías hacer es utilizar un <input> de tipo text en el cual asignarías una determinada expresión regular al atributo pattern que permita añadir espacios al inicio y final de la cadena.

[roboty]

Hola gracias a los dos por contestar, entonces no podria hacer las dos cosas a la vez validar con html5 y tambien con una funcion javascript las dos con la misma expresion por si no acepta el tipo email que valide con una funcion, de todas formas estoy probando la expresion de petit89 y no me funciona, como deberia hacer para permitir uno o varios espacios al principio o al final?
saludos

[Alexis88]

La expresión regular que te proporcionaron, es la misma que aparece en la documentación existente. Lo único que tienes que hacer es añadir la expresión que representa a un espacio en blanco: \s, y añadirle a la derecha y entre llaves el número de veces que puede aparecer o bien añadir un signo + para especificar que puede haber de uno a más espacios en blanco; aunque, la verdad, no tiene sentido permitir eso.

[alvaro_trewhela]

Mira no soy quien para responder, pero a mi se me ocurre lo siguiente

Código Javascript:

function verifMail(mail){
        var spl = mail.split("@");
            if(mail.length == "" || spl.length != 2 || spl[0] == "" || spl[1] == "" || !spl[0].patrones || !spl[1].patrones ){ return false; }
 
            
        var dom = spl[1].split(".");
        
            if(dom.length < 2){ return false; }
 
            for(var k=0;k<k.length;k++){
                if(dom[k] == ""){ return false; }
            }
            
        return true;
        }
 

ahí solo faltaría verificar [aA-zZ 0-9 . _ etc...] (patrones)

es una forma muy arcaica pero se entiende la idea