简体   繁体   中英

Using jQuery Validation plugin for a div instead of form?

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>

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

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, eg 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.

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

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
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM