Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Multi-part validation of form by accepting optional parameter for section to validate #452

Closed
wants to merge 1 commit into from

7 participants

@mattiasbrand

Needed multi-part validation for a wizardstyle signup where every page was a part of a form. Had to override 3 methods to accomplish this (mostly copying the old behavior and add an optional argument). Would be great if this optional parameter were added to the core. If you deem the addition acceptable I'd be happy to add some unit tests for it.

Regards
Mattias Brand

@kennethscott

I agree this would be a very useful addition.

@jzaefferer
Owner

Thanks for the contribution. Could you provide demo/test for this? Eventually unit tests would also help.

@tomchiverton

This is very useful for JavaScript apps that don't want to rewrite

<div id="newFolder" class="popupbox">
    <div class='arrow'></div>
    <div class='arrow-border'></div>
    <a href="#" class="close" title="close" ></a>
    New folder name:<br>
    <input id="newFolderName" name="newFolderName" ><br><button id="newFolderNameButton">create</button>
</div>

to

<div id="newFolder" class="popupbox">
<form id="newFolderForm">
    <div class='arrow'></div>
    <div class='arrow-border'></div>
    <a href="#" class="close" title="close" ></a>
    New folder name:<br>
    <input id="newFolderName" name="newFolderName" ><br><button id="newFolderNameButton">create</button>
</form>
</div>

just to be able to use a standard Validation set of rules.

@jzaefferer
Owner

@tomchiverton you should always wrap form elements in a form element for the native submit handling to work, e.g. pressing enter causes a submit event, as well as clicking a submit button (when using button, set type="submit"). Then just handle the submit event and call event.preventDefault(). More happy users since more native behaviour works, with minimal code.

@tomchiverton

In this app, there is no native form to submit, we are not supporting a non-JavaScript fall back at all - mainly because the GUI is generated with JavaScript (EmberJS) :-)

@jzaefferer
Owner

@mattiasbrand still looking for demo or test or both.

@tomchiverton I have to draw a few lines in the sand to keep things sane, and having a form around form elements is one of those lines. Its standard, doesn't have any drawbacks and makes sure all expected native behaviour "just works"™. I'm sure even Ember.js can generate a form wrapper.

On the other hand, if I end up merging this PR and it happens to solve the problem you're having, all the better.

@JustinSainton

+1 for the pull request - implemented as requested and worked exactly as described for a project I'm building out. Mattias has a very simple example code bit at his site - http://dotbrand.wordpress.com/2012/07/22/validate-a-section-of-a-form-with-jquery-validate/

Again, works exactly as described, no regressions.

@jzaefferer
Owner

@mattiasbrand @JustinSainton I want to land this, but need a unit test or at least a demo, preferably both. Could you help out with that, since you're using this in your sites?

@tomchiverton

I gave an example above...

@jzaefferer
Owner

@tomchiverton that's not very convincing. What's wrong with this?

<form id="newFolder" class="popupbox">
    <div class='arrow'></div>
    <div class='arrow-border'></div>
    <a href="#" class="close" title="close" ></a>
    New folder name:<br>
    <input id="newFolderName" name="newFolderName" ><br><button id="newFolderNameButton">create</button>
</form>
@tomchiverton

FORM doesn't work well when you are converting the content to a floating popup because it introduces new lines to the DOM flow.

@jzaefferer
Owner

Both form and div are block elements. You can style them however you want. Maybe I'm missing something - please provide a testpage that shows that there's really a problem with using form inline.

@davepgreene

I know I'm bumping an old topic, but I can provide a use case, at least:

SharePoint wraps entire pages in a form that makes using other forms within the page impossible. It would be tremendously useful to be able to mimic a form by using:

<div id="thisform">
    <input type="text" />
    <button type="submit">Submit</button>
</div>

and

$(function() {
    $("#thisform").validate(settings);
});

so I can validate the mock form.

Please do consider it.

@klmedia

Hi all!
If you are using a wizard that has a callback function fired on changing view, you can use the following:

//part of change view callback function ...
$("#form-selector").validate(validate_settings).settings.ignore = ":hidden *,:disabled";
return $("#mainform").valid();

I am using the ignore = ":hidden *", technically the other views/sections of the wizards are hidden, so it will validate only the current one.
In addition, another validation needs to be done for the whole form with a callback before the wizard completes:

$("#form-selector").validate(validate_settings).settings.ignore = ":disabled";
return $("#form-selector").valid();

Currently testing this, so not sure of 100% results, but hope it will helpful for someone.

@jzaefferer jzaefferer closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jul 2, 2012
  1. @mattiasbrand
This page is out of date. Refresh to see the latest.
Showing with 7 additions and 6 deletions.
  1. +7 −6 jquery.validate.js
View
13 jquery.validate.js
@@ -338,8 +338,8 @@ $.extend($.validator, {
},
// http://docs.jquery.com/Plugins/Validation/Validator/form
- form: function() {
- this.checkForm();
+ form: function(container) {
+ this.checkForm(container);
$.extend(this.submitted, this.errorMap);
this.invalid = $.extend({}, this.errorMap);
if (!this.valid()) {
@@ -349,9 +349,9 @@ $.extend($.validator, {
return this.valid();
},
- checkForm: function() {
+ checkForm: function(container) {
this.prepareForm();
- for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
+ for ( var i = 0, elements = (this.currentElements = this.elements(container)); elements[i]; i++ ) {
this.check( elements[i] );
}
return this.valid();
@@ -458,12 +458,13 @@ $.extend($.validator, {
}).length === 1 && lastActive;
},
- elements: function() {
+ elements: function(container) {
+ container = container || $(this.currentForm);
var validator = this,
rulesCache = {};
// select all valid inputs inside the form (no submit or reset buttons)
- return $(this.currentForm)
+ return container
.find("input, select, textarea")
.not(":submit, :reset, :image, [disabled]")
.not( this.settings.ignore )
Something went wrong with that request. Please try again.