2

Here's what I've tried so far.

<head>
  <script>
    function myFunction() {
      var a = document.forms["login"]["uname"].value;
      var b = document.forms["login"]["pwd"].value;
      if (a == "" || b == "") {
        error = "All fields must be entered.";
        document.getElementById("errorid").innerHTML = error;
      }
    }
  </script>
</head>

<body>
  <form name="login" action="">
    <b>Enter username:</b>
    <input type="text" name="uname" />
    <br />
    <b>Enter password:</b>
    <input type="password" name="pwd" />
    <br />
    <p id="errorid"></p>
    <input onclick="myFunction()" type="submit" />
  </form>
</body>

</html>

But it's not displaying the error message in p tag with ID = errorid Have I written wrong code? If yes then how can this be fixed?

Improve this question
1
  • 3
    The code you posted is working. I puted it in a demo so you can try it yourself. Commented Jan 11, 2016 at 12:42

6 Answers 6

Reset to default
5

Your code to display message is correct, problem here is that the form is submitted when the button is clicked. You need to prevent the default action when the condition is not fulfilled.

I would recommend you to use form's submit event, when false is returned it will prevent the default action (form being submitted).

<head>
  <script>
    function myFunction() {
      var a = document.forms["login"]["uname"].value;
      var b = document.forms["login"]["pwd"].value;
      if (a == "" || b == "") {
        error = "All fields must be entered.";
        document.getElementById("errorid").innerHTML = error;
        return false;
      }
      return true;
    }
  </script>
</head>

<body>
  <form name="login" action="" onsubmit="return myFunction()">
    <b>Enter username:</b>
    <input type="text" name="uname" />
    <br />
    <b>Enter password:</b>
    <input type="password" name="pwd" />
    <br />
    <p id="errorid"></p>
    <input type="submit" />
  </form>
</body>

</html>

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

10 Comments

that might be the issue, its reloading the page - here without the fix jsfiddle.net/np2egvrn
Yes it works. But I don't understand what was the problem in my code and how it is working now by making those changes. Could you please explain? (Also, I observed previously that the messaged was displayed indeed, but the page was reloaded immediately, so the message would get vanished.)
@VikasKumar, when false` is returned it will prevent the default action (form being submitted).`
Can't I use return false in my original code without making other changes? In fact I tried, but didn't work don't know why.
Ok let me try. I'll respond you soon.
|
0

You can add the required attribute to the input if the user must enter it in order to submit the form you can do this like :<input type='text' required> In this way you dont have to worry about the user not filling the field. HTML5 will automatically take care of that. Try it

Improve this answer

Comments

0

Please make the following one change:

On the submit button, replace the following code :

<input onclick="myFunction()" type="submit" />

with the following

<input onclick="return myFunction()" type="submit" />

Then it should work fine

Improve this answer

1 Comment

I think "return false" must be added in function. Isn't it?
0

Your code was displaying the error message instantly and then refreshed due to the submission. Use the required attribute in this way user will not be able to submit the form without filling all the required fields

Improve this answer

2 Comments

I want to use JavaScript only, as I want to practice it.
In that case satpal's answer is perfect
0

Try this,updated your code

<html>
<head>
  <script>
    function myFunction() {
      var a = document.forms["login"]["uname"].value;
      var b = document.forms["login"]["pwd"].value;
      if (a == "" || b == "") {
        error = "All fields must be entered.";
        document.getElementById("errorid").innerHTML = error;
        return false;
      }
     return true; 
    }
  </script>
</head>

<body>
  <form name="login" action="">
     <p id="errorid"></p>
    <b>Enter username:</b>
    <input type="text" name="uname" />
    <br />
    <b>Enter password:</b>
    <input type="password" name="pwd" />
    <br />

    <input onclick="return myFunction()" type="submit" />
  </form>
</body>

</html>
Improve this answer

Comments

-1

Change your input type="submit" to input type="button". Like this

<input onclick="myFunction()" type="button" value="Submit" />

The submit button basically posts the page and that causes the page to reload (since you haven't specified an action="" value in your <form> tag). Your error message does display in <p> but it disappears since your page refreshes.

If you're looking to submit the details, there are several ways of doing it. But, you would have to ask that as a separate question.

Improve this answer

3 Comments

How does this help? You need to submit the form later using .submit(). The guy is learning, don't complicate things here.
Actually I've answered his question to the point. His goal with this question isn't to submit the form, it's to understand why his code isn't working. I'll edit my answer so everyone can understand.
@AnoopSanthanam I want to submit the form as well :) Anyways thanks to both of you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.