Javascript, wie eine Validierungsfehlermeldung ohne Verwendung der Warnung erstellen

Question

Ich bin auf der Suche nach einer einfachen Formularüberprüfung Fehlermeldung, die unter dem Feld Benutzername angezeigt wird.

Ich kann nicht scheinen, es herauszufinden.

<form name ="myform" onsubmit="validation()"> 
    Username: <input type ="text" name="username" /><br />    
    <input type ="submit" value="submit" /> 
     <div id ="errors"> 
     </div> 
</form> 

Hier ist meine Validierungsskript:

function validation(){ 
    if(document.myform.username.value == ""){ //checking if the form is empty 
     document.getElementById('errors').innerHTML="*Please enter a username*"; 
       //displaying a message if the form is empty 
    } 

Answer 1

Sie müssen die Vorlage zu stoppen, wenn ein Fehler aufgetreten:

HTML

<form name ="myform" onsubmit="return validation();"> 

JS

if (document.myform.username.value == "") { 
    document.getElementById('errors').innerHTML="*Please enter a username*"; 
    return false; 
} 

Answer 2

würde ich dringend empfehlen, mit jQuery starten. Ihr Code würde wie folgt aussehen:

$(function() { 
    $('form[name="myform"]').submit(function(e) { 
     var username = $('form[name="myform"] input[name="username"]').val(); 
     if (username == '') { 
      e.preventDefault(); 
      $('#errors').text('*Please enter a username*'); 
     } 
    }); 
}); 

Answer 3

JavaScript

<script language="javascript"> 
     var flag=0; 
     function username() 
     { 
      user=loginform.username.value; 
      if(user=="") 
      { 
       document.getElementById("error0").innerHTML="Enter UserID"; 
       flag=1; 
      } 
     } 
     function password() 
     { 
      pass=loginform.password.value; 
      if(pass=="") 
      { 
       document.getElementById("error1").innerHTML="Enter password"; 
       flag=1; 
      } 
     } 

     function check(form) 
     { 
      flag=0; 
      username(); 
      password(); 
      if(flag==1) 
       return false; 
      else 
       return true; 
     } 

    </script> 

HTML

<form name="loginform" action="Login" method="post" class="form-signin" onSubmit="return check(this)"> 



        <div id="error0"></div> 
        <input type="text" id="inputEmail" name="username" placeholder="UserID" onBlur="username()"> 
       controls"> 
        <div id="error1"></div> 
        <input type="password" id="inputPassword" name="password" placeholder="Password" onBlur="password()" onclick="make_blank()"> 

        <button type="submit" class="btn">Sign in</button> 
       </div> 
      </div> 
     </form>