Stop Übermitteln mit leeren Eingabewerten

Question

Ich suche nach einer einfachen Lösung, um zu verhindern, dass ein Anmeldeformular mit leeren Eingabefeldern übermittelt wird. Der Code für das Formular ist unten. Ich würde gerne eine einfache Javascript-Lösung verwenden, wenn möglich.

<form id="login" method="post" action=""> 
    <input type="text" name="email" id="email" /> 
    <input type="password" name="pwd" id="pwd" /> 
    <button type="submit" id="submit">Login</button> 
</form>  

Wenn möglich, möchte ich auch die Grenze der leeren Felder ändern.

Vielen Dank im Voraus.

Answer 1

Beispielcode mit Dummy-Kontrollen:

<script type="text/javascript"> 
function checkForm(form) { 
    var mailCheck = checkMail(form.elements['email']), 
     pwdCheck = checkPwd(form.elements['pwd']); 
    return mailCheck && pwdCheck; 
} 

function checkMail(input) { 
    var check = input.value.indexOf('@') >= 0; 
    input.style.borderColor = check ? 'black' : 'red'; 
    return check; 
} 

function checkPwd(input) { 
    var check = input.value.length >= 5; 
    input.style.borderColor = check ? 'black' : 'red'; 
    return check; 
} 
</script> 

<style type="text/css"> 
#login input { 
    border: 2px solid black; 
} 
</style> 

<form id="login" method="post" action="" onsubmit="return checkForm(this)"> 
    <input type="text" name="email" id="email" onkeyup="checkMail(this)"/> 
    <input type="password" name="pwd" id="pwd" onkeyup="checkPwd(this)"/> 
    <button type="submit" id="submit">Login</button> 
</form> 

Answer 2

Möglicher Ansatz:

• Einstellung Aktion #
• Handler zur Absenden-Button Hinzufügen oder die onsubmit der Form
• Änderung der Wirkung der Form, wenn Textfelder nicht leer sind

Bearbeiten: Um dies auch für Nicht-JavaScript-Benutzer arbeiten zu können, fügen Sie die # - Aktion beim Laden der Seite.

Answer 3

Um es minimal zu halten würde ich nur verwenden:

<form id="login" method="post" action="" onSubmit="if (this.email.value == '' || this.pwd.value == '') {return false;}"> 

Zugegeben - weisen darauf hin, nicht, was für den Benutzer nicht in Ordnung ist, aber funktioniert ein Genuss .