jQuery Form validation is not working in JSP

Question

I am trying to validate a form using jquery with our validation plugin. When submit the form its redirect to the action page without validating.

Also I Tried by put the isValidFormLogin function in the Index.jsp as well.

Index.jsp

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap & JavaScripts-->
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="Controllers/controllerMain.js" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap & JavaScripts-->
<title>JQuery</title>
</head>
<body>
<div class="container">
    <div class="card mx-auto" style="width: 30rem;">           
            <div class="card-body">
                <h5 class="card-title"></h5>
                <form id="formLogin" action="Items.jsp" method="post">
                    <div class="form-group">
                        <label for="username">Username</label>
                        <input type="email" class="form-control" name="username" id="username" aria-describedby="emailHelp" placeholder="Enter Username">
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" class="form-control" name="password" id="password" placeholder="Password">
                    </div>
                    <button name="btnLogin" id="btnLogin" type="submit" class="btn btn-primary">Login</button>
                 </form>
            </div>
            <div class="card-footer">
                <a href="#">Forgot Password ?</a>
            </div>
            <div id="msgLogin">
                <% //out.println(MsgLogin); %>
            </div>
        </div>
</div>
</body>

contollerMain.js

//Login 
$(document).on("click","#btnLogin",function(){
    var result = isValidFormLogin();
    if(result=="true"){
        $("#formLogin").submit();
    }
    else{
        $("#MsgLogin").html(result);
    }

});

function isValidFormLogin(){
    if($.trim($("#username").val())==""){
        return "Enter Username";
    }
    if($.trim($("#password").val())==""){
        return "Enter Password";
    }
    return "true";
}

Swati · Accepted Answer · 2019-05-21 13:03:18Z

3

Add prevent default to stop default submit button functionality :

 $(document).on("click","#btnLogin",function(e){
        e.preventDefault();
        var result = isValidFormLogin();
        if(result=="true"){
            $("#formLogin").submit();
        }
        else{
            $("#MsgLogin").html(result);
        }
});

edited May 21, 2019 at 13:03

Swati

28.5k4 gold badges26 silver badges45 bronze badges

answered May 21, 2019 at 11:44

Yogendra

1,3007 gold badges19 silver badges46 bronze badges

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

1 Comment

Ahamed Safnaj Over a year ago

Now Its no redirect.. But in my .jsp file <% out.println(MsgLogin); %> this line shows an error.

Andrianekena Moise · Accepted Answer · 2019-05-21 11:42:47Z

2

You need to cancel the event submission first using the event object.

$(document).on("click","#btnLogin",function(event){
// cancel submission
event.preventDefault();
var result = isValidFormLogin();
if(result=="true"){
    $("#formLogin").submit();
}
else{
    $("#MsgLogin").html(result);
}
});

answered May 21, 2019 at 11:42

Andrianekena Moise

1,0687 silver badges16 bronze badges

1 Comment

Ahamed Safnaj Over a year ago

Now Its no redirect.. But in my .jsp file <% out.println(MsgLogin); %> this line shows an error.

Priyanka Giri · Accepted Answer · 2019-05-21 11:51:07Z

1

Submit button has default form submission functionality. You need to prevent before submitting the form.

$(document).on("click","#btnLogin",function(e){
e.preventDefault();
//your code
});

answered May 21, 2019 at 11:51

Priyanka Giri

847 bronze badges

Collectives™ on Stack Overflow

jQuery Form validation is not working in JSP

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related