CODEWITHSUNDEEP
javascript
Chitransh Saurabh
Chitransh Saurabh

Reputation: 377

Dynamic Form Validation using javascript

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 ??

Upvotes: 1

Views: 9292

Answers (3)

Ben Jacobs
Ben Jacobs

Reputation: 2526

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

  1. you must use $("#idpassword");
  2. 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

  1. 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)

Upvotes: 1

user1432124
user1432124

Reputation:

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;
    }
}

Upvotes: 1

Ajay Singh Beniwal
Ajay Singh Beniwal

Reputation: 19037

<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>

Upvotes: 1

Related Questions