Validate Textbox Javascript

Question

I am trying to validate the textbox in the login Xhtml and once I figured out the code, the section class'container' in the code is not working.

How can I write the code and validate the textbox properly?

<head>
    <script type = 'text/javascript'>
        function validate() {
            if (document.getElementById("login").value == "") {
                alert("User name may not be blank");
            } else if (document.getElementById("password").value == "") {
                alert("Password may not be blank.");
            }
        }
    </script> 
    <title>Login Form</title>
    <link rel="stylesheet" href="css/style.css"/> 
</head>    
<body>
    <h1> Login</h1>
    <section class="container">
        <div>         
            <form method="post" action="index.xhtml" onsubmit="return validate();">
                <p>
                    <input type="text" name="login" value="" id="login" placeholder="Username or Email" />
                    <input type="password" name="password" value="" id="password" placeholder="Password" />
                </p>
                <p>
                    <label>
                        <input type="checkbox" name="remember_me" id="remember_me" />Remember me on this computer
                    </label>
                </p>
                <p class="submit">
                    <input type="submit" name="commit" value="Login" onclick="validate();" />
                    <button type="reset" value="Clear">Clear</button>
                </p>
            </form>
            <form action= "http://localhost:8080/ChattBank/LoginServlet" method="post"/>
        </div>
    </section>
</body>

Smit Patel · Accepted Answer · 2022-08-05 10:05:36Z

2

You can use jquery validation. It's very simple.

<form method="post" action="index.xhtml" id="loginForm">
...
</form>
$("#loginForm").validate({
rules: {
  "login": {
    required: true
  },
  "password": {
    required: true
  },
  messages: {
    "login": "This field is required",
    "password": "This field is required",
  }
}
});

edited Aug 5, 2022 at 10:05

Smit Patel

3,3372 gold badges29 silver badges47 bronze badges

answered Sep 26, 2014 at 3:49

Ryan Nghiem

2,4482 gold badges21 silver badges31 bronze badges

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

Comments

jpcanamaque · Accepted Answer · 2014-09-26 04:05:15Z

1

EDIT

Try this: (Replace your forms with this)

<input type="text" name="login" value="" id="login" placeholder="Username or Email"  />
<input type="password" name="password" value="" id="password" placeholder="Password" />
</p>
<p>
    <label>
        <input type="checkbox" name="remember_me" id="remember_me" />Remember me on this computer</label>
</p>
<p class="submit">
    <input type="submit" name="commit" value="Login" onclick="validate();" />
    <button type="reset" value="Clear">Clear</button>
</p>
<script>
    function validate() {
        if (document.getElementById("login").value == "") {
            alert("User name may not be blank");
        } else if (document.getElementById("password").value == "") {
            alert("Password may not be blank.");
        }
    }
</script>

Here is a working fiddle

edited Sep 26, 2014 at 4:05

answered Sep 26, 2014 at 2:04

jpcanamaque

1,0791 gold badge8 silver badges15 bronze badges

5 Comments

helpmeimnoob Over a year ago

I implemented it but it's not working still, what did I do wrong?

jpcanamaque Over a year ago

@SpencerWieczorek What other problems does the fiddle have? It is working fine for me.

Spencer Wieczorek Over a year ago

@JohnroePauloCañamaque It is now that you updated it, the only thing left you need to add is the form submission when the values are valid.

jpcanamaque Over a year ago

@SpencerWieczorek If I do that, there will be no more way for the OP to explore on his work;

Spencer Wieczorek Over a year ago

@JohnroePauloCañamaque The OP originally had a form going to a different page.

Spencer Wieczorek · Accepted Answer · 2014-09-26 02:05:41Z

0

We are trying to use document.getElementById("login") and document.getElementById("password"), which are both null. Because your two input fields do not have id as an attribute. You will need to add that:

<input type="text" ... id="login"  />
...
<input type="password" ... id="password"  />

Also validate() takes no attributes, so don't pass this on the login input.

answered Sep 26, 2014 at 2:05

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

Collectives™ on Stack Overflow

Validate Textbox Javascript

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related