Validation login et mot de passe sur vol stationnaire

Question

MON HTML

<p id="login" onmouseover="showForm();" onmouseout="hideForm();"><span class="label">Login/Register</span> 
       <span id="loginForm">   
        <span class="form-elements"> 
        <span class="form-label">Name:</span> 
        <span class="form-field"> 
        <input type="text" id= "login1" onsubmit= "showform()"/> 
        </span> </span>   
        <span class="form-elements"> 
        <span class="form-label">Password:</span> 
        <span class="form-field"> 
        <input type="password" id= "password1" onsubmit= "showform()"/> 
        </span> </span>   
        <span class="form-elements"> 
        <span class="submit-btn"> 
        <input type="submit" value=" Submit " /></span> 
        <a href="register.html"><button type="button" class="swd-button">Register</button></a> 
       </span> 
       </span></p> 

Mon javascript

function showForm(){ 
    document.getElementById('loginForm').style.display = "block"; 
} 

function hideForm(){ 
    document.getElementById('loginForm').style.display = "none"; 
} 

Mon contrôle de validation

var isValid = true; 
       var login1 = document.getElementById('login1').value; 
var password1 = document.getElementById('password1').value; 
       if(login1 == null ||login1 == "") 
       { 
        document.getElementById("errorusername").innerHTML="[Please type something!]"; 
        isValid = false; 
       } 

       if(password1 == null || password1 == "") 
       { 
        document.getElementById("errorpassword").innerHTML="[Please type something!]"; 
        isValid = false; 

       } 
       return isValid; 

ce que im essayant de faire est de valider le login et le mot de passe. ce qui est l'utilisateur ne peut mettre null seulement. Tout le reste est acceptable. mais alors mon showform est déjà une fonction. alors où puis-je mettre ma validation. Eh bien, j'ai essayé de le mettre à l'intérieur de la showform() il ne semble pas fonctionner

Answer 1

Donc, voici le code, mais vous avez des choses que vous devez résoudre.

function validate(){ 
    document.getElementById('failed').innerHTML = ""; 
    var isValid = true; 
    var login1 = document.getElementById('login1').value; 
    var password1 = document.getElementById('password1').value; 
    if(login1 == null ||login1 == "") 
    { 
     document.getElementById('login1').value="Type Something"; 
     isValid = false; 
    }; 

    if(password1 == null || password1 == "") 
    { 
     document.getElementById('failed').innerHTML = "NEED A PASSWORD!"; 
     isValid = false; 
    }; 
}; 

J'ai changé votre code HTML un peu trop ...

<p id="login"><span class="label">Login/Register</span> 
<span id="loginForm">   
<span class="form-elements"> 
<span class="form-label">Name:</span> 
<span class="form-field"> 
<input type="text" id= "login1" onsubmit= "showform()"/> 
</span> </span>   
<span class="form-elements"> 
<span class="form-label">Password:</span> 
<span class="form-field"> 
<input type="password" id= "password1" onsubmit= "showform()"/> 
</span> </span>   
<span class="form-elements"> 
<span class="submit-btn"> 
<input type="submit" value="Submit" onclick="validate()" /></span> 
<a href="register.html"><button type="button" class="swd-button">Register</button></a> 
</span> 
</span><span id='failed' style="color:red;"></span></p> 

Vous ne pouvez pas définir le champ de mot de passe « Type Quelque chose », car il suffit de se présenter sous forme d'astérisques car les champs de mot de passe sont cachés . Vous avez donc besoin d'un type d'élément externe pour informer l'utilisateur qu'un mot de passe est requis. C'est pourquoi j'ai ajouté la balise span à la fin.

Si j'étais vous, j'ajouterais les deux notifications pour le texte manquant dans les champs en dehors des boîtes elles-mêmes ... mais cela pourrait être ma préférence.

une chose ... Je ne sais pas pourquoi vous utilisez les balises span au lieu d'une table ... il est vraiment difficile à lire ...