Jquery validation is not working using jquery validation plugin

Question

I tried a simple validation using jquery validation plugin but I was not able to achieve it.Nothing get's changed when i click the submit button, please help me on this

I've mentioned the code below,

Thanks in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" />
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js" />
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnSubmit').click(function () { 
            $('#logform').validate({
                rules: {
                    txtUsr: {
                        required: true

                    },
                    txtPass: {
                        required: true

                    }

                },
                messages: {
                    txtUsr: {
                        required: 'Please enter username'
                    },
                    txtPass: {
                        required: 'Please enter password'
                    }
                }

            });

        });

        });

    </script>
</head>
<body>
<div id='LoginDiv' style='width:400px;height:300px;background-color:green;'>
    <form method="post" action="" id='logform'>
        User Name : <input type="text" id='txtUsr' name='txtUsr' style='margin-top:12px'/>
        <br/>
        <br/>
        Password : <input type="text" id='txtPass' name='txtPass' /> 
        <br/>
        <br/>
        <input type="submit" id='btnSubmit' value='Submit' />
    </form>
    </div>
</body>
</html>

score 2 · Answer 1 · answered Mar 25 '13 at 15:41

You shouldn't call the validate in the click event handler, but as an initialization step:

$(document).ready(function () {
    $('#logform').validate({
        rules: {
            txtUsr: {
                required: true
            },
            txtPass: {
                required: true
            }
        },
        messages: {
            txtUsr: {
                required: 'Please enter username'
            },
            txtPass: {
                required: 'Please enter password'
            }
        }
    });
});

It will hook up itself to the keyup and submit events.

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

Problem is due to script self-closing tags.

Try this out:

http://jsfiddle.net/adiioo7/FFTkJ/

Use

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>

instead of

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js" />

Also check this Why don't self-closing script tags work?

edited May 23 '17 at 11:57

Community

1
1

answered Mar 25 '13 at 15:43

Aditya Singh

9,512
5
32
55

Maybe you could include some information as to why you would suggest that and how it might help the OP's cause? – awbergs Mar 25 '13 at 15:45

Jquery validation is not working using jquery validation plugin

2 Answers2

Problem is due to script self-closing tags.

Try this out:

Linked