Form Validation using jQuery not working

Question

As i'm very new to jQuery i'm having trouble validating my very first as well as very simple login form using jQuery validation.
I have searched for jQuery validation and have also seen many questions posted on the site but found them helpless for myself.
Here is my code.
Please help me finding out my mistake.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>apply.html</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
</head>
<body>
<script type="text/javascript">
    $("#testForm").validate({
        rules: {
            uname: { required: true },
            pwd: { required: true }
        },
        messages: {
            uname: { required: "Username can not be left blank" },
            pwd: { required: "Please enter Password" }
        }
    });
</script>
<form action="#" method="POST" id="testForm">
    Username :
    <input type="text" name="uname" /><br>
    Password :
    <input type="password" name="pwd" /><br>
    <input type="submit" value="Push">
</form>
</body>
</html>

EDIT : the problem i'm facing is that on submitting the form no error message message is showing i.e. no validation taking place.

Keep in mind that any client-side validation can be bypassed so you have to validate once again on the server-side. — Michał
– Michał, Commented Jun 28, 2015 at 15:27
@DanGetz : It simply submitting the form without any error message. Sorry for not mentioning that. — Anand
– Anand, Commented Jun 28, 2015 at 15:28

Michał · Accepted Answer · 2015-06-28 15:37:28Z

1

I've reproduced your code with the fiddle and it works properly. I assume the problem is that the code is not run after onLoad() event. Here's my solution:

$(function(){
    $("#testForm").validate({
        rules: {
            uname: { required: true },
            pwd: { required: true }
        },
        messages: {
            uname: { required: "Username can not be left blank" },
            pwd: { required: "Please enter Password" }
        }
    });
});

answered Jun 28, 2015 at 15:37

Michał

2,4904 gold badges28 silver badges33 bronze badges

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

1 Comment

Anand Over a year ago

Thanks for the help :) i just added $(document).ready(function(){ // my jQuery code }); and it worked

Collectives™ on Stack Overflow

Form Validation using jQuery not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related