JavaScriptのイベントをトリガーすると、別のdivにエラーテキストが表示されます。

Question

JavaScriptに奇妙な問題があります。私はajaxデータベースで作業しています。データベースのログインフォームは、ajaxリクエスト/機能を使用してPHPコントローラにデータを送信します。私はログインページにerror-displayer invisible div（名前はerrorDiv）があります。 ERRORDIV HTMLは次のとおりです。

<div id="errorDiv" style="visibility:hidden; display:none"> 
... 
</div> 

ログインフォームでユーザー名とパスワードの両方のフィールドを空のままにしているとき、私は、レスポンスにPHPコントローラを必要とするログインフォームを表示し、JavaScriptの機能を実行する「DisplayLoginError（）」となります

function DisplayLoginError() 
{ 
document.getElementById('errorDiv').style.visibility="visible"; 
document.getElementById('errorDiv').style.display="block"; 
document.getElementById('errorDiv').innerHTML = "<?php echo $loginerror; ?>"; 
} 

PHP制御コードは次のとおり：

if(isset($_REQUEST['login'])) 
{ 
if(isset($_REQUEST['username']) && isset($_REQUEST['password'])) 
    { 
    .....Both the fields are filled... 
    } 
else /*===Error:Any of the username or password field has been left empty====*/ 
    { 
    $loginerror='Please fill both the Fields to login.'; 
    include $_SERVER['DOCUMENT_ROOT'].'\hospital\includes\collegedata\login-form.html.php'; 
    } 
} 

エラーdiv.DisplayLoginError（）関数のコードがある（両方のフィールドを記入してください）可視エラーDIVを作成し、エラーメッセージを表示します

今や問題は、ほとんどのJavaScriptイベントがユーザーアクションによって起動されるため、実行できないということです。私は、formタグにmouseoverイベントを割り当てました。このイベントは、DisplayLoginError関数を実行してerrorDivにエラーを表示します。

<form onmouseover="DisplayLoginError()"> ..... </form> 

しかし、適切な解決策ではありません。私はページ全体ではなくログインdivだけを読み込んでいる間、この関数を実行できるイベントが必要です。メインページがまだdivの変更だけで残っているajaxデータベースとして、ここでonloadイベントを使用することはできません。時間のイベントがこの目的のために使用できるかもしれません...私は確信していません...もっと良い解決策があるかもしれません...私はどのようにAJAXでそれを行うことができます...助けてください！

Answer 1

JavaScriptでフォーカスを失ったイベントを使用することができます。私はあなたの質問をはっきりと理解できません。これは単なる提案に過ぎません。

<div id='errorDiv' > 
</div> 
Username : <input type="text" name="username" id="uname" onBlur="checkUsername();"> 
Password : <input type="text" name="password" id="pword" onBlur="checkValues();"> 

<script type="text/javascript"> 
function checkValues() 
{ 
    uname = document.getElementById('uname').value; 
    pword = document.getElementById('pword').value; 
    if(uname=="" || pword=="") { 
     document.getElementById('errorDiv').innerHTML="Please fill both the fields"; 
    }else{ 
     document.getElementById('errorDiv').innerHTML=""; 
    } 
} 
function checkUsername() 
{ 
    uname = document.getElementById('uname').value; 
    if(uname==""){ 
     document.getElementById('errorDiv').innerHTML="Please enter username"; 
    }else{ 
     document.getElementById('errorDiv').innerHTML=""; 
    } 
} 
</script>