Javaスクリプトで警告ボックスなしのエラーメッセージを表示するには

無効な名前を入力したときにフォームのテキストフィールドのすぐ隣にエラーメッセージが表示されるように、以下のコードを修正してください。Javaスクリプトで警告ボックスなしのエラーメッセージを表示するには

<html> 
    <head> 
    <script type="text/javascript"> 
    function validate() { 
    if(myform.fname.value.length==0) 
    { 
    document.getElementById("fname").innerHTML="this is invalid name "; 
    } 
    } 
    </script> 
    </head> 
    <body> 
    <form name="myform"> 
    First_Name 
    <input type=text id=fname name=fname onblur="validate()"> </input> 

    <br> <br> 
    Last_Name 
    <input type=text id=lname name=lname onblur="validate()"> </input> 

    <br> 
    <input type=button value=check> 

    </form> 
    </body> 
</html>

出典

2013-02-05 user2042156

直接あなたの質問に関連しているが、あなたのHTML属性値の前後に引用符を逃していないを試すことができます。あなたはそれらを見逃すべきではありません。また、 ''は ''を必要としません。 XHTMLを書く場合、それは自己閉鎖するべきです。 –

それは '.innerHTML'は、それは私がテキストフィールド内のエラーメッセージを取得「の値を」を使うが、要件がテキストフィールドの横にあるとき@legendinmaking HI [値] –

ですないです。あなたがテキストフィールドの横にスパンを必要とし、それは、innerHTMLプロパティです変更されるテキストフィールドの横にメッセージを表示する – user2042156

あなたは文句を言わない、ここで良い何かをスパンのような他の要素を試すか、単に以前に作られたと隠されたエラーメッセージを表示し、入力値のinnerHTMLプロパティを設定するこの

<html> 
      <head> 
      <script type="text/javascript"> 
      function validate() 
      { 
      var fnameval=document.getElementById("fname").value; 
      var fnamelen=Number(fnameval.length); 
       if(fnamelen==0) 
       { 
        document.getElementById("fname_msg").innerHTML="this is invalid name "; 
       } 
      } 
      </script> 
      </head> 
      <body> 
      <form name="myform"> 
      First_Name 
      <input type=text id=fname name=fname onblur="validate()"> </input> 
      <span id=fname_msg></span> 
      <br> <br> 
      Last_Name 
      <input type=text id=lname name=lname onblur="validate()"> </input> 

      <br> 
      <input type=button value=check> 

      </form> 
      </body> 
     </html>

出典

2013-02-05 07:30:12

を発射された参照作ら – user2042156

のようにそれを試すことができます。名前フィールドの値を設定できます。

<head> 
    <script type="text/javascript"> 
     function validate() { 
      if (myform.fname.value.length == 0) { 
       document.getElementById("fname").value = "this is invalid name "; 
       document.getElementById("errorMessage").style.display = "block"; 
      } 
     } 
    </script> 
</head> 

<body> 
    <form name="myform">First_Name 
     <input type="text" id="fname" name="fname" onblur="validate()"></input> <span id="errorMessage" style="display:none;">name field must not be empty</span> 

     <br> 
     <br>Last_Name 
     <input type="text" id="lname" name="lname" onblur="validate()"></input> 
     <br> 
     <input type="button" value="check" /> 
    </form> 
</body>

FIDDLE

出典

2013-02-05 07:36:22 marbor3

ウェブマスターやウェブプログラマー、あなたのページの開始時に

<!DOCTYPE html>

を挿入してください。第二に、あなたが最後の要素を含めることはできません

type="text" id="fname"

入力要素のように引用符を使用して属性を囲む必要があり、ちょうどそれが好き閉じる：

/>

入力要素がinnerHTMLを持っていけない、それはvalue SORあなたのjavascriptを持っています行は次のようにする必要があります。

それが標準に都合がよいかどうか確かめてください。

出典

2013-02-05 07:41:07

まず、入力フィールドのinnerHTMLに書き込もうとしています。これは動作しません。あなたは書き込むにはdivやスパンが必要です。

First_Name 
<input type=text id=fname name=fname onblur="validate()"> </input> 
<div id="fname_error"></div>

が続い

if(myform.fname.value.length==0) 
    { 
    document.getElementById("fname_error").innerHTML="this is invalid name "; 
    }

セカンドを読むために、あなたの検証機能を変更、私はいつもこの種のもののためにonBlurイベントを使用して躊躇してい：のようなものを試してみてください。フィールドを終了せずにフォームを送信することができます（たとえば、リターンキー）。この場合、検証コードは実行されません。フォームを送信するボタンから検証を実行し、そのドキュメントが検証に合格した場合にのみ関数内からsubmit（）を呼び出すことをお勧めします。

出典

2013-02-05 07:41:09 ElPedro

は

<html> 
<head> 
<script type="text/javascript"> 
function validate() { 
    if(myform.fname.value.length==0) 
    { 
document.getElementById('errfn').innerHTML="this is invalid name"; 
    } 
} 
</script> 
</head> 
<body> 
<form name="myform"> 
    First_Name 
    <input type=text id=fname name=fname onblur="validate()"> </input><div id="errfn"> </div> 

<br> <br> 
Last_Name 
<input type=text id=lname name=lname onblur="validate()"> </input> 

<br> 
<input type=button value=check> 

</form> 
</body> 
</html>

出典

2013-02-05 07:43:49

このコードを試してみてください。このようにしてみてください。

function validate(el, status){ 
    var targetVal = document.getElementById(el).value; 
    var statusEl = document.getElementById(status); 
    if(targetVal.length > 0){ 
     statusEl.innerHTML = ''; 
    } 
    else{ 
     statusEL.innerHTML = "Invalid Name"; 
    } 
}

今HTML：

<!doctype html> 
<html lang='en'> 
<head> 
<title>Derp...</title> 
</head> 
<body> 
<form name="myform"> 
    First_Name 
    <input type="text" id="fname" name="fname" onblur="validate('fname','fnameStatus')"> 
    <br /> 
    <span id="fnameStatus"></span> 
    <br /> 
    Last_Name 
    <input type="text" id="lname" name="lname" onblur="validate('lname','lnameStatus')"> 
    <br /> 
    <span id="lnameStatus"></span> 
    <br /> 
    <input type=button value=check> 
</form> 
</body> 
</html>

出典

2013-02-05 07:53:48 codeguerrilla

あなたは.VALUEを使用してはいけません。innerHTMLのそれは入力タイプのフォーム要素

<html> 
    <head> 
    <script type="text/javascript"> 
    function validate() { 
    if(myform.fname.value.length==0) 
    { 
    document.getElementById("fname").value="this is invalid name "; 
    } 
    } 
    </script> 
    </head> 
    <body> 
    <form name="myform"> 
    First_Name 
    <input type=text id=fname name=fname onblur="validate()"> </input> 

    <br> <br> 
    Last_Name 
    <input type=text id=lname name=lname onblur="validate()"> </input> 

    <br> 
    <input type=button value=check> 

    </form> 
    </body> 
</html>

出典

2013-02-05 07:57:46 Techmonk

この

<html> 
    <head> 
    <script type="text/javascript"> 
    function validate() { 
    if(myform.fname.value.length==0) 
    { 
    document.getElementById("error").innerHTML="this is invalid name "; 
    document.myform.fname.value=""; 
    document.myform.fname.focus(); 
    } 
    } 
    </script> 
    </head> 
    <body> 
    <form name="myform"> 
    First_Name 
    <input type="text" id="fname" name="fname" onblur="validate()"> </input> 
<span style="color:red;" id="error" > </span> 
    <br> <br> 
    Last_Name 
    <input type="text" id="lname" name="lname" onblur="validate()"> </input> 

    <br> 
    <input type=button value=check> 

    </form> 
    </body> 
</html>

出典

2013-02-05 08:02:48

を試しているように私はReNjITh.R答え@しかし、あなただけのテキストボックスの横にエラーメッセージを表示したい場合はに同意メートル。ただ、

<html> <head> <script type="text/javascript"> function validate() { if(myform.fname.value.length==0) { document.getElementById('errfn').innerHTML="this is invalid name"; } } </script> </head> <body> <form name="myform"> First_Name <input type=text id=fname name=fname onblur="validate()" /><span id="errfn"></span> <br> <br> Last_Name <input type=text id=lname name=lname onblur="validate()"/><br> <input type=button value=check /> </form> </body>

出典

2013-02-05 08:17:16

...変更のdidntもそのイベントが、私はそのイベントがトリガされて見にもいけない試みた – user2042156

これで、編集したコードを確認できます。 –

以下のようにも、この

<tr> 
    <th>Name :</th> 
    <td><input type="text" name="name" id="name" placeholder="Enter Your Name"><div id="name_error"></div></td> 
</tr> 



    function register_validate() 
{ 
    var name = document.getElementById('name').value; 
    submit = true; 
    if(name == '') 
    { 
     document.getElementById('name_error').innerHTML = "Name Is Required"; 
     return false; 
    } 
    return submit; 
} 
document.getElementById('name').onkeyup = removewarning; 
function removewarning() 
{ 
    document.getElementById(this.id +'_error').innerHTML = ""; 
}

出典

2016-10-13 06:57:55 Thiyagu

Javaスクリプトで警告ボックスなしのエラーメッセージを表示するには

答えて

関連する問題