javascript come creare un messaggio di errore di convalida senza utilizzare l'avviso

Question

Sto cercando di fare un semplice messaggio di errore di convalida del modulo che viene visualizzato sotto il campo del nome utente.

Non riesco a capirlo.

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

Ecco il mio script di convalida:

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

È necessario fermare la presentazione in caso di errore:

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

vi consiglierei vivamente di iniziare a utilizzare jQuery. Il tuo codice sarà simile:

$(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>