Using jQuery Validation plugin for a div instead of form?

Question

NOTE: I referred these questions Qn1 , Qn2 before asking this . But honestly the answers are not working. Please suggest a solution.. I am doing validation to my input fields using jquery validation plugin. My code works fine when all the tags are kept inside a form tag and accessing it in jquery like, $("#formID").validate() --> this is working fine... But I want to achieve the same for a div instead of a form.

I tried it like this: $("#divID").validate() but it's not working...

Below is my code. please take a look and tell me how to achieve it for a div.

 <script type="text/javascript">
    $(document).ready(function () {
        $("#content").validate({
            onfocusout: true,
            rules: {
                fullname:
                    {
                    lettersonly: true,
                    required: true
                    },
                age:
                    {
                        required: true,
                        number: true,
                        min: 20,
                        max:98,
                        nowhitespace:true
                    }
            },
            messages: {
                fullname: "Please specify your name.",
                age:"Please enter your correct age."
            }
        });
    });
</script>
<div id="content">
            <p>
                <label for="fullname">Full name:</label>
                <input type="text" name="fullname" id="fullname" /><br />
                <label for="age">Age</label>
                <input type="text" name="age" />
            </p>
            <p>
                <button id="submit" value="">Search User</button>
            </p>
 </div>

I think you are going to have to change the validation script because that one only works for forms, according to the documentation: http://docs.jquery.com/Plugins/Validation#Options_for_the_validate.28.29_method — Niklas, Feb 20 '13 at 14:00
Have a form. Even if you are going to process the data with JS, have a form. Forms group controls for the benefit of non-visual tools. Forms continue to work when the JS fails (for whatever reason). Follow the principles of [Progressive Enhancement](http://en.wikipedia.org/wiki/Progressive_enhancement) and [Unobtrusive JavaScript](http://en.wikipedia.org/wiki/Unobtrusive_JavaScript) — Quentin, Feb 20 '13 at 14:13
hello @mplungjan . i am working with jquery ajax asynchronous operations. In order to select the field i want to work with (according to the requirement for ajax calls), i prefer validating 'div' than forms. My name is Ebenezar. — Ebenezar John Paul, Feb 20 '13 at 14:14
@mplungjan: sorry..:) , text in the validation ? sorry i dint understand. could you please explain what you want to know one more time. — Ebenezar John Paul, Feb 20 '13 at 14:19
`fullname: "please specify ur name",` - it should be `fullname: "please specify your name",` in a serious web page — mplungjan, Feb 20 '13 at 14:21
@mplungjan: got it. really thanks for helping. any luck with div validation ? — Ebenezar John Paul, Feb 20 '13 at 14:25
@Niklas : thank you for the response. so, according to what you are saying, i guess i have to modify the code inside the validation script in order to make the script validate the div on submit instead of form right ? But i wanna know whether it'll work ? can you please give any suggestion about that... — Ebenezar John Paul, Feb 20 '13 at 14:32
@Ebenezar_Gislen_Softwares: Ugh, I guess you could go down that path, but I'm afraid we'll never see you again if you do. Changing the script sounds like a nightmare to me. Will it work in the end? I really have no idea, I'm sorry. — Niklas, Feb 20 '13 at 14:43
@Niklas: Thats true. i dont wanna burn all my time and end up using the form again. still i'm gonna give it a try.. a little bit atleast:) and please let me know if u find any solution to the requirement. thank you. — Ebenezar John Paul, Feb 20 '13 at 14:49

score 1 · Answer 1 · edited May 23 '17 at 12:08

Quote OP: "NOTE: I referred these questions Qn1 , Qn2 before asking this . But honestly the answers are not working."

Incorrect, the the accepted answer on Qn2 is working perfectly:

The validation plugin is (currently) designed to work on a <form>, and only on a <form>. You can also note that all of the plugin documentation references a form, not any other generic container.

You must use a form element with the jQuery Validate plugin. There is no workaround for this.

However, if you just want to validate some inputs without actually submitting a form, there are lots of working solutions. Example: http://jsfiddle.net/GmQ5d/

Full Documentation

score 0 · Answer 2 · answered Feb 20 '13 at 14:06

Unfortunately, not the answer you want to hear, but using the JQuery Validate plugin you can't perform the validation on anything other than a form tag. You may note that all of the plugin documentation references a form and not any other generic container, e.g Div.

This website shows you how to implement JQuery Validate with webforms, not as easy as the normal examples that you get from JQuery, but still good.

score 0 · Answer 3 · answered Feb 20 '13 at 14:11

0

jQuery's own validation only works for forms. This plugin, however, looks like it should work without forms. According to their documentation that is, I haven't tested it myself.

answered Feb 20 '13 at 14:11

Niklas

13,005
23
79
119

score 0 · Answer 4 · answered Oct 18 '21 at 17:02

Very outdated, but seems like it still requires one possible solution to be added. If you cannot use form (in .NET it simply cannot be more than 1 form per page), you can still validate directly each field.

So instead of

$("#divID").validate();

you can use:

var isValid = $("#fullname").validate();
isValid = $("#age").validate();

if(isValid){
// do submit form
}

Using jQuery Validation plugin for a div instead of form?

4 Answers4