El título parece fácil, pero necesito ayuda.

Tengo un formulario con un campo de entrada "correo electrónico" cuyo valor es nulo hasta que el usuario lo llena. De acuerdo, al hacer clic en el botón enviar, llamo a la función validate () que es:

function validate(){
    var email=document.getElementById("email");
    if(!(/[\w-\.]{3,15}@([\w-]{2,}\.)*([\w-]{2,}\.)[\w-]{2,4}/.test(email))) {
        email.setAttribute('value','Insert a correct email');
        email.style.border="2px solid red";
    } else {
        alert("Valid field"); // This is to test it works
        email.style.border="2px solid #63ce40";
        this.form.submit();
    }
    }

Lo que quiero hacer aquí es que si el correo electrónico insertado no cumple con los requisitos (no es válido), cambie el valor de la entrada con "Insertar un correo electrónico correcto".

Si el campo está vacío y hago clic en enviar, funciona perfectamente, pero si inserto texto y hago clic en enviar, el único cambio será que el campo obtenga un borde rojo de 2px, pero no cambie el texto.

Me gustaría saber qué debo hacer para que cuando haga clic en enviar el correo electrónico incorrecto que fue escrito, sea eliminado y reemplazado por el texto "Insertar un correo electrónico correcto".

La entrada es:

<li>
    <input type="text" id="email" name="email" 
    value="" onfocus="this.value=''" size="40"/>
</li>

Y el botón de enviar que estoy usando:

<input id="bsubmit" type="button" value="Submit"
name="submit" onclick=";this.disabled=true;validate();
this.disabled=false;"/>

Gracias.