Is there a way to validate a field outside of a form?

[ppetree]

Subject of the issue

Validating a field without that field being inside a form.

Your environment

• version of jquery-validate: 1.17.0
• which browser and its version: all - mostly mobile

Steps to reproduce

Expected behaviour

I would like to call validate(element, rule_obj);

I'm working on an onboarding process. I have a number of divs on a page, only the active div is visible. I want to validate the input fields on the active div before hiding that div and unhiding the next div in the onboarding sequence.

This would be a snap I could specify a single field to validate without using building 6-8 forms on a single page. I don't want the data submitted until I have collected all the data from each div (screen) in the onboarding process.

Is there a way to do this that I can't find in the documentation?

[Arkni]

Hi @ppetree,

Sorry for taking so long to respond. Unfortunately, validating a input outside of a form is not supported and it was already requested in #2156. But you can work around this by using only one form and your onboarding will be inside it. That way you can use .valid() or validator.element(element) to validate an element.

[ppetree]

No worries on the slow response, we all have day jobs.

As you and I discussed earlier, there's a number of problems with using forms in mobile apps. There are DOM limits, form action= is unnecessary and unwanted (I spent two full days chasing my tail on this the last time).

In mobile apps there are just so many one-off fields that one needs to validate that it would just be soooo nice to do something like:

$("#someid").validate(function(result) {
.
.
.},   { rules: {someid: { required: true, 
             errorPlacement: function(error, element) {
                $(element).parent().css('border-color', "red").attr("placeholder", error);
             },
             messages: { someid: " (requires a valid xyz)" },
             }}                                                    
  });

[SimonHeimberg]

Issue mentioned in #2209 (comment) is about form elements outside of a form, but belonging to the form (linked with the attribute form="formName").
This issue is about elements not belonging to any form.

[DreamTear]

I found a way,work in DIV

$('#commentForm input[type="submit"]').click(function() {
	setTimeout(function() {
		$('#commentForm').trigger('submit.validate')
	}, 500)
})
$('#commentForm input').each(function() {
	// this.form = $('#commentForm')
	Object.defineProperty(this, 'form', {get: function(){return $('#commentForm')[0]}})
})

[github-actions]

This issue/proposal has been automatically marked as idle and stale because it hasn't had any recent activity. It will be automatically closed if no further activity occurs. If you think this is wrong, or the problem still persists, just pop a reply in the comments and one of the maintainers will (try!) to follow up.
Thank you for contributing :)