Dynamic Form Validation using javascript

Question

Its the newbie again.. I am trying to design a form that takes a username and a password and validates them. However first i want to make sure that the user fills in both the fields before i pass it on to the servlet or any other server related component. I wish to do so using javascript which generates an alert button, more like a JOptionPane when either or both the fields are empty. My code is

index.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
    <script src="newjavascript.js"></script>
</head>
<body>
    <h1>Hello World!</h1>
    <form id="form" method="post" action="final.jsp">
    Student name :<br><input type="text" value="" name="username"   id="idusername"><br><br>
    Password :<br><input type="text" value="" name="password" id="idpassword"><br><br>
    <input type="submit" value="Register" />
</form>
</body>
</html>

I pass the above onto a javascript file newjavascript.js which is

$(document).ready(function(){
var form = $("#form");
var username = $("#idusername");
    var password = $("idpassword");
//On Submitting
form.submit(function(){
    if(validateName() & validatePassword())
        return true;
    else
    {
        alert('Some fields are not filled correctly. Please fill them correctly.');
        return false;
    }
});

function validateName(){

    if(username.val().length < 1){
        return false;
    }

    else{
        return true;
    }
}

    function validatePassword(){


    if(password.val().length <5){
        return false;
    }

    else{           
        return true;
    }
}
});

Is my javascript code wrong or i am not properly able to pass on the parameters to it ??

Your first line will invalidate the doctype. doctype must be on first line. Not directly answering the problem, but just saying. — Romain Valeri
– Romain Valeri, Commented Jun 20, 2012 at 16:13
Okay.. I made the doctype statement the very first line. But it still does not solve the problem !! — Chitransh Saurabh
– Chitransh Saurabh, Commented Jun 20, 2012 at 16:16
Okay add # to var password. and add reference to Jquery to validate $(document).ready(function(){}); — HGK
– HGK, Commented Jun 20, 2012 at 16:26
I have done it before, but yet unable to get it validated !! — Chitransh Saurabh
– Chitransh Saurabh, Commented Jun 20, 2012 at 16:33

Ajay Singh Beniwal · Accepted Answer · 2012-06-20 16:22:04Z

1

<script>
        $(document).ready(function () {
            var form = $("#form");
            alert(form);
            var username = $("#idusername");
            var password = $("#idpassword");
            //On Submitting
            form.on("submit",function () {
                if (validateName() & validatePassword())
                    return true;
                else {
                    alert('Some fields are not filled correctly. Please fill them correctly.');
                    return false;
                }
            });

            function validateName() {

                if (username.val().length < 1) {
                    return false;
                }

                else {
                    return true;
                }
            }

            function validatePassword() {
                alert(password);

                if (password.val().length < 5) {
                    return false;
                }

                else {
                    return true;
                }
            }
        });


    </script>

answered Jun 20, 2012 at 16:22

Ajay Singh Beniwal

19k11 gold badges84 silver badges100 bronze badges

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

1 Comment

Chitransh Saurabh Over a year ago

The above code gives some error in the var form = $("#form"); line

score 1 · Accepted Answer · 2012-06-20 16:25:31Z

1

Do like this

$(document).ready(function(){
var form = $("#form");
form.submit(function(){
    if(validateName() && validatePassword())
        return true;
    else
    {
        alert('Some fields are not filled correctly. Please fill them correctly.');
        return false;
    }
});

});
function validateName(){
var username = $("#idusername");

    if(username.val().length < 1){
        return false;
    }

    else{
        return true;
    }
}

    function validatePassword(){
    var password = $("#idpassword");//previously it was wrong


    if(password.val().length <5){
        return false;
    }

    else{           
        return true;
    }
}

edited Jun 20, 2012 at 16:25

answered Jun 20, 2012 at 16:17

user1432124

1 Comment

Chitransh Saurabh Over a year ago

I tried your modified code. But i donot get any validation even when i click submit button without entering any of the fileds..

Ben Jacobs · Accepted Answer · 2012-06-20 16:55:57Z

1

Here's a fiddle to a corrected version of your code on with the following fixes:

you must use $("#idpassword");
You should use && for the "logical and" comparison - not & for a "bitwise and." The code works with the bitwise &, but you're not trying to do a bitwise operation.

ADDITION

You must prevent the default form submission.

form.submit(function(event) { ... if (bad) { event.preventDefault(); }

(I had this in the fiddle but forgot to mention it)

edited Jun 20, 2012 at 16:55

answered Jun 20, 2012 at 16:21

Ben Jacobs

2,5264 gold badges25 silver badges34 bronze badges

1 Comment

Chitransh Saurabh Over a year ago

I did the two corrections you suggested but yet still as sonn as i click Register without filling any field the "final.jsp" page opens u !!

Collectives™ on Stack Overflow

Dynamic Form Validation using javascript

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related