jquery with validation plugin not working

Question

After having spent hours trying to solve a seemingly simple problem (being walking through stackoverflow questions...), here I am once more obliged to turn to stackoverflow and submit my issue...I have a very basic form just two controls: a text input and a submit bottom. I am trying to get the jquery validation plugin to work. Here is my code:

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
 <title></title>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" ></script>
<script src="jquery.validate.js"></script>

<script>

    $(function () {

        $('#frm').validate({

            rules: {
                txtInput: {
                    required:"Reuired"
                }
            },
            messages:{
                txtInput:"Please enter your first name"
            }
        });

    });

</script>

</head>
<body>
    <form id="frm" name="frm" method="post">
        <div>
            <input id="txtInput" type="text" placeholder="Name" />
        </div>
        <br />    
        <input id="btn" type="submit" class="btn btn-danger" value="Submit" />
    </form>    

    </body>
    </html>

jquery.validate.js is version 1.11.1

My understanding is that if i submit the form with blank text input I must receive the message "Please enter your first name". But nothing happens and the form submits normally. I cannot figure out what I am doing wrong. The case is fairly simple. Thank you in advance for whatever help and/or direction you may give me.

Vikram · Accepted Answer · 2014-08-04 15:25:12Z

1

Can you please try this:

 <input id="txtInput" type="text" placeholder="Name"  name="txtInput"/>

Please note that I've added name attribute to the input,also update the required rule to true as :

rules: {
   txtInput: {
      required: true
   }
}

DEMO

edited Aug 4, 2014 at 15:25

answered Aug 4, 2014 at 15:15

Vikram

7336 silver badges26 bronze badges

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

2 Comments

TheSoul Over a year ago

Hello back. Your suggestion seems to have worked. I have added 'name=txtInput' and now I can see the error message. Only it seems that it has no style applied to it (its color is black instead of red). I am going to dig deeper see if i can fix it. Thank you, it has put me in the right direction

Vikram Over a year ago

@seyaobey Great news,if you need help then let me know.

PalinDrome555 · Accepted Answer · 2014-08-04 15:28:19Z

0

After looking at the documentation, you are not using the required method properly, required takes either a true or false, or you can use it as an expression such as #agree:checked. Validate Docs @Vikram - correct, name attribute is what it's looking for.

$(function () {

    $('#frm').validate({

        rules: {
            txtInput: {
                required: true
            }
        },
        messages:{
            txtInput:"Please enter your first name"
        }
    });

});

edited Aug 4, 2014 at 15:28

answered Aug 4, 2014 at 15:16

PalinDrome555

9256 silver badges16 bronze badges

Comments

PalinDrome555 · Accepted Answer · 2014-08-04 15:34:26Z

0

Please see Demo

$(function () {               
 $('#frm').validate({

        rules: {
            txtInput: {
                required:true
            }
        },
        messages:{
            txtInput:"Please enter your first name"
        }
    });

});

edited Aug 4, 2014 at 15:34

PalinDrome555

9256 silver badges16 bronze badges

answered Aug 4, 2014 at 15:19

Yogesh Sharma

2,0271 gold badge15 silver badges33 bronze badges

Collectives™ on Stack Overflow

jquery with validation plugin not working

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related