O título parece fácil, mas preciso de ajuda.

Eu tenho um formulário com uma entrada de campo "email" cujo valor é null até que o usuário preencha. Ok, ao clicar no botão enviar, eu chamo a função validate () que é:

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();
    }
    }

O que quero fazer aqui é que, se o email inserido não atender aos requisitos (não é válido), altere o valor da entrada com "Inserir email correto".

Se o campo estiver vazio e eu clicar em enviar, ele funcionará perfeitamente, mas se eu inserir texto e clicar em enviar, a única mudança será o campo recebendo uma borda vermelha de 2 pixels, mas sem alteração de texto.

Gostaria de saber o que devo fazer para que, quando eu clicar em enviar o email errado que foi escrito, ele seja removido e substituído pelo texto "Inserir um email correto".

A entrada é:

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

E o botão de envio que estou usando:

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

Obrigado.