2013-02-05 16 views
9

Si prega di correggere il codice qui sotto non funziona come previsto ad esempio, ho bisogno di un messaggio di errore da mostrare proprio accanto al campo di testo in forma quando l'utente immette un nome non validoPer visualizzare il messaggio di errore senza messaggio di avviso in Java Script

<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> 
+0

non direttamente connessi alla tua domanda, ma il codice HTML perso le virgolette attorno valori degli attributi. Dovresti * non * sentirmi mancare. Inoltre, '' non richiede ''. Se si scrive XHTML dovrebbe essere a chiusura automatica. –

+0

non è '.innerHTML', è' value' –

+0

hi @legendinmaking quando uso 'valore' come messaggio di errore all'interno del campo di testo ma il requisito è accanto al campo di testo. – user2042156

risposta

2

si può provare in questo modo

<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> 
+0

Ho provato a non vedere nemmeno che l'evento si innesca ... :( – user2042156

0

impostazione innerHtml del valore di ingresso non farà nulla di buono qui, provare con un altro elemento, come durata, o semplicemente visualizzare fatte in precedenza e il messaggio di errore nascosto. È possibile impostare il valore del campo nome tho.

<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

5

web master o programmatori web, si prega di inserire

<!DOCTYPE html> 

all'inizio della pagina. In secondo luogo si dovrebbe racchiudere i tuoi attributi con citazioni come

type="text" id="fname" 

ingresso elemento non deve contenere elemento terminale, basta chiudere le cose come:

/> 

elemento di input non hanno innerHTML, ha value sor Javascript linea deve essere:

document.getElementById("fname").value = "this is invalid name"; 

Si prega di scrivere in modo organizzato e ma sono sicuro che è conveniente per gli standard.

0

Prima si sta tentando di scrivere nell'HTML interno del campo di input. Questo non funzionerà. Devi avere un div o span in cui scrivere. Provare qualcosa di simile:

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

quindi modificare la funzione di convalida per leggere

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

In secondo luogo, sono sempre titubante sull'utilizzo onBlur per questo genere di cose. È possibile inviare un modulo senza uscire dal campo (ad esempio, la chiave di ritorno), nel qual caso il codice di convalida non verrà eseguito. Preferisco eseguire la convalida dal pulsante che invia il modulo e quindi chiamare il submit() dalla funzione solo se il documento ha superato la convalida.

8

provare questo codice

<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> 
0

Prova in questo modo:

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"; 
    } 
} 

Ora 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> 
0

si dovrebbe usare .value e non.innerHTML in quanto è un tipo di input elemento forma

<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> 
1

provare questo

<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> 
4

I m d'accordo con @ReNjITh.R risposta, ma se si desidera visualizzare il messaggio di errore proprio accanto casella di testo. Proprio come sotto

enter image description here

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

+0

puoi per favore inserire l'intero codice che hai scritto ... Sarà di grande aiuto – user2042156

+0

Ora puoi controllare il mio codice modificato. –

1

Si può anche provare questo


<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 = ""; 
} 
Problemi correlati