Show error message for controls using Jquery

Question

Script : Jquery I am new to jquery, and I found this piece of code which I tried but didn't succeed. It uses jquery validator plugin. Here is the code :

<html>
<body>

<form id="employment-application" method="post">

    <input name="full_name" type="text" />
    <div id="full_name_validate"></div>
    <input type="submit" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>


<script>
$(function validate() {

    var rules = {
        rules: {
            full_name: {
                minlength: 2,
                maxlength: 50,
                required: true
            },
        },
        errorPlacement: function (error, element) {
            var name = $(element).attr("name");
            error.appendTo($("#" + name + "_validate"));
        },
    };

    $('#employment-application').validate(rules);

});

</script>
</body>
</html>

How do I achieve this ? here is the link http://jsfiddle.net/cMhQ7/

its working in jsfiddle link u submitted. not sure what you are expecting. the first time it validates will be when u are loosing focus of the field. — Bala
– Bala, Commented Mar 11, 2015 at 3:17
I want the same output in the code , i have provided. I don't know where am I going wrong, whether I am missing any plugins, no idea. Please help — Harsh Singhi
– Harsh Singhi, Commented Mar 11, 2015 at 3:24

Bala · Accepted Answer · 2015-03-11 04:14:56Z

1

looks like the validator plugin version you are using is causing the issue. Try the following one http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js

or any from the page jqueryvalidation.org hotlink

I hope this fixes the issue.

edited Mar 11, 2015 at 4:14

answered Mar 11, 2015 at 4:08

Bala

7163 silver badges11 bronze badges

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

Comments

Kishan · Accepted Answer · 2015-03-11 10:22:41Z

try this

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form id="employment-application" method="post">
    <input name="full_name" type="text" />
    <div id="full_name_validate"></div>
    <input type="submit" />
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script>
$(function validate() {

    var rules = {
        rules: {
            full_name: {
                minlength: 2,
                maxlength: 50,
                required: true
            },
        },
        errorPlacement: function (error, element) {
            var name = $(element).attr("name");
            error.appendTo($("#" + name + "_validate"));
        },
    };

    $('#employment-application').validate(rules);

});
</script>
</body>
</html>

Collectives™ on Stack Overflow

Show error message for controls using Jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related