To show error message without alert box in Java Script

Question

Please correct the below code it is not working as expected i e  i need a error message to be shown just beside the textfield in the form when user enters an invalid name   lt html gt     lt head gt     lt script type  text javascript  gt    function validate       if myform fname value length  0         document getElementById  fname   innerHTML  this is invalid name               lt  script gt     lt  head gt     lt body gt     lt form name  myform  gt    First Name    lt input type text id fname name fname onblur  validate    gt   lt  input gt      lt br gt   lt br gt    Last Name    lt input type text id lname name lname onblur  validate    gt   lt  input gt      lt br gt     lt input type button value check gt       lt  form gt     lt  body gt   lt  html gt

User · Answer

You should use  value and not  innerHTML as it is a input type form element   lt html gt     lt head gt     lt script type  text javascript  gt    function validate       if myform fname value length  0         document getElementById  fname   value  this is invalid name               lt  script gt     lt  head gt     lt body gt     lt form name  myform  gt    First Name    lt input type text id fname name fname onblur  validate    gt   lt  input gt      lt br gt   lt br gt    Last Name    lt input type text id lname name lname onblur  validate    gt   lt  input gt      lt br gt     lt input type button value check gt       lt  form gt     lt  body gt   lt  html gt

User · Answer

web masters or web programmers  please insert    lt  DOCTYPE html gt    at the start of your  page  Second you should enclose your attributes with quotes like  type  text  id  fname    input element should not contain end element  just close it like      gt    input element dont have innerHTML  it has value sor your javascript line should be   document getElementById  fname   value    this is invalid name     Please write in organized way and make sure it is convenient to standards

User · Answer

try this    lt html gt     lt head gt     lt script type  text javascript  gt    function validate       if myform fname value length  0         document getElementById  error   innerHTML  this is invalid name       document myform fname value        document myform fname focus               lt  script gt     lt  head gt     lt body gt     lt form name  myform  gt    First Name    lt input type  text  id  fname  name  fname  onblur  validate    gt   lt  input gt   lt span style  color red   id  error   gt   lt  span gt     lt br gt   lt br gt    Last Name    lt input type  text  id  lname  name  lname  onblur  validate    gt   lt  input gt      lt br gt     lt input type button value check gt       lt  form gt     lt  body gt   lt  html gt

User · Answer

First you are trying to write to the innerHTML of the input field  This will not work  You need to have a div or span to write to  Try something like   First Name  lt input type text id fname name fname onblur  validate    gt   lt  input gt   lt div id  fname error  gt  lt  div gt    Then change your validate function to read  if myform fname value length  0            document getElementById  fname error   innerHTML  this is invalid name            Second  I m always hesitant about using onBlur for this kind of thing  It is possible to submit a form without exiting the field  e g  return key  in which case your validation code will not be executed  I prefer to run the validation from the button that submits the form and then call the submit   from within the function only if the document has passed validation

User · Answer

Setting innerHtml of input value wont do anything good here  try with other element like span  or just display previously made and hidden error message   You can set value of name field tho       lt head gt       lt script type  text javascript  gt          function validate                 if  myform fname value length    0                    document getElementById  fname   value    this is invalid name                    document getElementById  errorMessage   style display    block                                lt  script gt   lt  head gt    lt body gt       lt form name  myform  gt First Name          lt input type  text  id  fname  name  fname  onblur  validate    gt  lt  input gt   lt span id  errorMessage  style  display none   gt name field must not be empty lt  span gt            lt br gt           lt br gt Last Name          lt input type  text  id  lname  name  lname  onblur  validate    gt  lt  input gt           lt br gt           lt input type  button  value  check    gt       lt  form gt   lt  body gt      FIDDLE

User · Answer

Try like this   function validate el  status        var targetVal   document getElementById el  value       var statusEl   document getElementById status        if targetVal length  gt  0           statusEl innerHTML                else          statusEL innerHTML    Invalid Name            Now HTML    lt  doctype html gt   lt html lang  en  gt   lt head gt   lt title gt Derp    lt  title gt   lt  head gt   lt body gt   lt form name  myform  gt    First Name    lt input type  text  id  fname  name  fname  onblur  validate  fname   fnameStatus    gt     lt br   gt     lt span id  fnameStatus  gt  lt  span gt     lt br   gt    Last Name    lt input type  text  id  lname  name  lname  onblur  validate  lname   lnameStatus    gt      lt br   gt     lt span id  lnameStatus  gt  lt  span gt     lt br   gt     lt input type button value check gt    lt  form gt   lt  body gt   lt  html gt

User · Answer

Try this code   lt html gt   lt head gt    lt script type  text javascript  gt   function validate       if myform fname value length  0      document getElementById  errfn   innerHTML  this is invalid name            lt  script gt   lt  head gt   lt body gt    lt form name  myform  gt    First Name    lt input type text id fname name fname onblur  validate    gt   lt  input gt  lt div id  errfn  gt     lt  div gt    lt br gt   lt br gt  Last Name  lt input type text id lname name lname onblur  validate    gt   lt  input gt    lt br gt   lt input type button value check gt     lt  form gt   lt  body gt   lt  html gt

User · Answer

You can also try this     lt tr gt       lt th gt Name   lt  th gt       lt td gt  lt input type  text  name  name  id  name  placeholder  Enter Your Name  gt  lt div id  name error  gt  lt  div gt  lt  td gt   lt  tr gt         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

User · Answer

you can try it like this    lt html gt             lt head gt             lt script type  text javascript  gt            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                                               lt  script gt             lt  head gt             lt body gt             lt form name  myform  gt            First Name            lt input type text id fname name fname onblur  validate    gt   lt  input gt              lt span id fname msg gt  lt  span gt             lt br gt   lt br gt            Last Name            lt input type text id lname name lname onblur  validate    gt   lt  input gt              lt br gt             lt input type button value check gt               lt  form gt             lt  body gt           lt  html gt

User · Answer

I m agree with  ReNjITh R answer but If you want to display error message just beside textbox  Just like below      lt html gt   lt head gt   lt script type  text javascript  gt      function validate                  if myform fname value length  0                       document getElementById  errfn   innerHTML  this is invalid name                    lt  script gt   lt  head gt   lt body gt       lt form name  myform  gt           First Name           lt input type text id fname name fname onblur  validate      gt  lt span id  errfn  gt  lt  span gt           lt br gt   lt br gt           Last Name           lt input type text id lname name lname onblur  validate     gt  lt br gt            lt input type button value check   gt        lt  form gt   lt  body gt

User · Answer

You should place your script code after your HTML code and within your body tags  That way it doesn t run before the html code

[javascript] To show error message without alert box in Java Script

Examples related to javascript

Examples related to html