javascript cách tạo thông báo lỗi xác thực mà không sử dụng cảnh báo

Question

Tôi đang tìm cách tạo thông báo lỗi xác thực biểu mẫu đơn giản hiển thị trong trường tên người dùng.

Tôi dường như không thể tìm ra.

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

Đây là kịch bản xác nhận của tôi:

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

Bạn cần phải dừng việc nộp nếu một lỗi xảy ra:

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

tôi sẽ đề nghị bạn nên bắt đầu sử dụng jQuery. Mã của bạn sẽ trông như thế:

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