Der Titel scheint einfach, aber ich brauche Hilfe.

Ich habe ein Formular mit einem Feld "E-Mail", dessen Wert null ist, bis der Benutzer ihn ausfüllt. Okay, beim Klicken auf den Submit-Button rufe ich die Funktion validate () auf, die lautet:

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

Was ich hier tun möchte, ist, dass, wenn die eingefügte E-Mail nicht den Anforderungen entspricht (nicht gültig ist), der Wert der Eingabe mit "Korrekte E-Mail einfügen" geändert wird.

Wenn das Feld leer ist und ich auf "Senden" klicke, funktioniert es einwandfrei. Wenn ich jedoch Text einfüge und auf "Senden" klicke, wird nur das Feld rot umrandet, es wird jedoch kein Text geändert.

Ich möchte wissen, was ich tun muss, damit beim Klicken auf "Senden" die falsche E-Mail, die geschrieben wurde, entfernt und durch den Text "Richtige E-Mail einfügen" ersetzt wird.

Die Eingabe ist:

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

Und den Submit-Button, den ich benutze:

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

Vielen Dank.