Displaying error messages without using alert in javascript/html

Question

i'm trying to display a validation error message without using an alert box. But its not working. Previously I've used "innerHTML" successfully. But i don't understand why it doesn't work here. This is my code.

function validate()
{
  if(document.regform.fname.value.length=="")
    {
       document.getElementById("error").innerHTML="error";
    }    
}

<header>
   <h1>SIGN UP</h1>
</header>
<div class="div1"><img src="img.jpg" width="250px"></div>
<div class="div2" id="div2">
  <form name="regform" onsubmit="return validate()">
     <label><input type="text" name="fName" id="fna"></label>
     <input type="submit" name="submit" value="Sign Up" >
     <p id="error"></p>
  </form>
</div>

<footer></footer>

Possible duplicate of javascript how to create a validation error message without using alert — Nisarg Shah
– Nisarg Shah, Commented Jul 30, 2017 at 3:42

Anup Kumar Gupta · Accepted Answer · 2017-07-30 04:23:41Z

1

There are some mistakes in your code. Firstly the name is fName but you are using fname and then you must compare length by an integer value not empty string.

Also you would like to stop the submission if an error occurred. Hence you return a false if there is an error. Try this.

function validate() {
  if (document.regform.fName.value.length == '0') {
    document.getElementById("error").innerHTML = "error";
    return false;
  }
}

<body>
  <header>
    <h1>SIGN UP</h1>
  </header>
  <div class="div2" id="div2">
    <form name="regform" onsubmit="return validate()">

      <label><input type="text" name="fName" id="fna"></label>
      <input type="submit" name="submit" value="Sign Up">
      <p id="error"></p>
    </form>
  </div>
  <footer></footer>
</body>

Hope it works.

edited Jul 30, 2017 at 4:23

answered Jul 30, 2017 at 3:49

Anup Kumar Gupta

3615 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Durga Over a year ago

indent your answer, and make a snippet

Udara Navarathna Over a year ago

@Anup it worked. Seems i have to be more careful while coding.. thank you

Collectives™ on Stack Overflow

Displaying error messages without using alert in javascript/html

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related