jQuery validation without "form" tag

Question

According to http://docs.jquery.com/Plugins/Validation the "form" tag is necessary in order to do validation. In my case I don't have form tag. How can I validate(required field) my textbox on click of "button" type control

Chicory

Please explain why you don't have a form tag and why you don't just simply add a form tag, totally negating this issue. – Boo

Answer 1

Why not just add a form tag? If it's an input, then it should normally be part of a form.

Thrave

If I want to send data with ajax instead of post request, I would not add form. – Harvin

@mesut: then you lose the enter key working as submit. Can you explain why you do that? – Thrave

I have a page which contains a lot of same type inputs. I want to do validation and save when user focusout from each input. Also page has other forms. I think encapsulating the page with form for only validation shouldn't be good. I think we can make input validation without form. – Harvin

what about an inline edit?? That wouldnt have a form – Ohg

Answer 2

You could always wrap it with a fake form and validate it.

var $textbox = $("#textbox");
$("<form>").append($textbox).validate();

Note, however, that in most cases this should imply that we're going about something wrongly, and I'd consider a form for every element that's submitted in any form (whether it's through standard GET/POST, AJAX, etc.).

Egerton

Answer 3

I know, it is quite old question, anyway, I had almost the same problem: I had defined form:

<form id="some-form-id"></form>

And than in document I had inputs like this:

<input type="text" form="some-form-id" />

jQuery validator cannot validate this, because elements weren't within the form, so I made small update: There is method elements which load elements to validate and I edit it into version bellow this text. I add loading items which are not inside form, which I load into variable outForm. This items are loaded only if form has attribute id. I test it and it works. I hope that this will help to someone.

elements: function () {
                var validator = this,
                    rulesCache = {};

                // select all valid inputs inside the form (no submit or reset buttons)
                var inForm = $(this.currentForm)
                    .find("input, select, textarea")
                    .not(":submit, :reset, :image, [disabled], [readonly]")
                    .not(this.settings.ignore)
                    .filter(function () {
                        if (!this.name && validator.settings.debug && window.console) {
                            console.error("%o has no name assigned", this);
                        }

                        // select only the first element for each name, and only those with rules specified
                        if (this.name in rulesCache || !validator.objectLength($(this).rules())) {
                            return false;
                        }

                        rulesCache[this.name] = true;
                        return true;
                    });

                var formId = $(this.currentForm).attr('id');
                if(typeof formId == 'undefined')
                    return inForm;

                var outForm = $("input[form='"+formId+"'], select[form='"+formId+"'], textarea[form='"+formId+"']")
                    .not(":submit, :reset, :image, [disabled], [readonly]")
                    .not(this.settings.ignore)
                    .filter(function () {
                        if (!this.name && validator.settings.debug && window.console) {
                            console.error("%o has no name assigned", this);
                        }

                        // select only the first element for each name, and only those with rules specified
                        if (this.name in rulesCache || !validator.objectLength($(this).rules())) {
                            return false;
                        }

                        rulesCache[this.name] = true;
                        return true;
                    });

                return $.merge(inForm,outForm);

            },

Redford