8000 Ignore elements that belong to other/nested forms by Arkni · Pull Request #2147 · jquery-validation/jquery-validation · GitHub
[go: up one dir, main page]
Skip to content

Ignore elements that belong to other/nested forms #2147

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 4, 2018
Merged

Ignore elements that belong to other/nested forms #2147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fcdf856
Test: Ignore elements that belong to other/nested forms
Arkni Mar 4, 2018
9df1013
Core: Ignore elements that belong to other/nested forms
Arkni Mar 4, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion src/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -375,7 +375,8 @@ $.extend( $.validator, {
this.invalid = {};
this.reset();

var groups = ( this.groups = {} ),
var currentForm = this.currentForm,
groups = ( this.groups = {} ),
rules;
$.each( this.settings.groups, function( key, value ) {
if ( typeof value === "string" ) {
Expand All @@ -398,6 +399,12 @@ $.extend( $.validator, {
this.name = $( this ).attr( "name" );
}

// Ignore the element if it belongs to another form. This will happen mainly
// when setting the `form` attribute of an input to the id of another form.
if ( currentForm !== this.form ) {
return;
}

var validator = $.data( this.form, "validator" ),
eventType = "on" + event.type.replace( /^validate/, "" ),
settings = validator.settings;
Expand Down Expand Up @@ -631,6 +638,11 @@ $.extend( $.validator, {
this.name = name;
}

// Ignore elements that belong to other/nested forms
if ( this.form !== validator.currentForm ) {
return false;
}

// Select only the first element for each name, and only those with rules specified
if ( name in rulesCache || !validator.objectLength( $( this ).rules() ) ) {
return false;
Expand Down
5 changes: 4 additions & 1 deletion test/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ <h2 id="qunit-userAgent"></h2>
<input data-rule-greaterThan="#y1" value="10" name="y2" id="y2">
<input data-rule-lessThanEqual="#z2" value="10" name="z1" id="z1">
<input data-rule-greaterThanEqual="#z1" value="10" name="z2" id="z2">
</form>
</form>
<form id="testForm6">
<input data-rule-required="true" data-rule-minlength="2" type="checkbox" name="check" id="form6check1">
<input type="checkbox" name="check" id="form6check2">
Expand Down Expand Up @@ -449,6 +449,9 @@ <h3></h3>
<br>
<input type="text" name="something" id="_something" />
</form>
<form id="testForm28">
<input type="text" name="f28input" required>
</form>
</div>
</body>
</html>
167 changes: 167 additions & 0 deletions test/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,173 @@ QUnit.test( "valid(), ignores ignored elements", function( assert ) {
assert.ok( $( "#firstnamec" ).valid() );
} );

QUnit.test( "valid() should ignore elements that belong to other/nested forms", function( assert ) {
var form = $( "#testForm28" );

form.validate();

// 1. Test with nested form
form.append(
"<form id='testForm28-nested'>" +
" <input type='text' name='f28nestedinput' required>" +
"</form>"
);

try {
form.valid();
assert.ok( true, "It should ignore the input of nested form" );
} catch ( err ) {
assert.ok( false, "Shouldn't throw an error" );
}

// Remove the validator atteched to testForm28
form.removeData( "validator" );
$( "#testForm28-nested" ).remove();

// 2. Test using another form outside of validated one
form.parent().append(
"<form id='testForm28-other'>" +
" <input type='text' name='f28otherinput' required>" +
" <input type='text' name='f28input' form='testForm28' required>" +
"</form>"
);

$( "#testForm28-other" ).validate();

try {
$( "#testForm28-other" ).valid();
assert.ok( true, "It should ignore the input of other form" );
} catch ( err ) {
assert.ok( false, "Shouldn't throw an error" );
}

$( "#testForm28-other" ).remove();
} );

QUnit.test( "form() should ignore elements that belong to other/nested forms", function( assert ) {
var form = $( "#testForm28" );
var v = form.validate();

form.validate();

// 1. Test with nested form
form.append(
"<form id='testForm28-nested'>" +
" <input type='text' name='f28nestedinput' required>" +
"</form>"
);

try {
v.form();
assert.ok( true, "It should ignore the input of nested form" );
} catch ( err ) {
assert.ok( false, "Shouldn't throw an error" );
}

// Remove the validator atteched to testForm28
form.removeData( "validator" );
$( "#testForm28-nested" ).remove();

// 2. Test using another form outside of validated one
form.parent().append(
"<form id='testForm28-other'>" +
" <input type='text' name='f28otherinput' required>" +
" <input type='text' name='f28input' form='testForm28' required>" +
"</form>"
);

v = $( "#testForm28-other" ).validate();

try {
v.form();
assert.ok( true, "It should ignore the input of other form" );
} catch ( err ) {
assert.ok( false, "Shouldn't throw an error" );
}

$( "#testForm28-other" ).remove();
} );

QUnit.test( "elements() should ignore elements that belong to other/nested forms", function( assert ) {
var form = $( "#testForm28" );
var v = form.validate();

// 1. Test with nested form
form.append(
"<form id='testForm28-nested'>" +
" <input type='text' name='f28nestedinput' required>" +
"</form>"
);

try {
assert.equal( v.elements().length, 1, "There should be only one element to validate" );
} catch ( err ) {
assert.ok( false, "Shouldn't throw an error" );
}

// Remove the validator atteched to testForm28
form.removeData( "validator" );
$( "#testForm28-nested" ).remove();

// 2. Test using another form outside of validated one
form.parent().append(
"<form id='testForm28-other'>" +
" <input type='text' name='f28otherinput' required>" +
" <input type='text' name='f28input' form='testForm28' required>" +
"</form>"
);

v = $( "#testForm28-other" ).validate();

try {
assert.equal( v.elements().length, 1, "There should be only one element to validate" );
} catch ( err ) {
assert.ok( false, "Shouldn't throw an error" );
}

$( "#testForm28-other" ).remove();
} );

QUnit.test( "Ignore elements that have form attribute set to other forms", function( assert ) {

// Append a form that contains an input with form attribute set to "testForm28"
$( "#testForm28" ).parent().append(
"<form id='testForm28-other'>" +
" <input type='text' name='f28otherinput' required>" +
" <input type='text' name='f28input' form='testForm28' required>" +
"</form>"
);

// Attach the plugin to the appended form
$( "#testForm28-other" ).validate();

// 1. Simulate typing
try {
$( "[name='f28input']", "#testForm28-other" ).trigger( "keyup" );
assert.ok( true, "It should ignore the input of other form" );
} catch ( err ) {
assert.ok( false, "Shouldn't throw an error while typing" );
}

// 2. Simulate forcussing in the input
try {
$( "[name='f28input']", "#testForm28-other" ).trigger( "focusin" );
assert.ok( true, "It should ignore the input of other form" );
} catch ( err ) {
assert.ok( false, "Shouldn't throw an error on focus" );
}

// 3. Simulate focussing out the input
try {
$( "[name='f28input']", "#testForm28-other" ).trigger( "focusout" );
assert.ok( true, "It should ignore the input of other form" );
} catch ( err ) {
assert.ok( false, "Shouldn't throw an error on blur" );
}

$( "#testForm28-other" ).remove();
} );

QUnit.test( "addMethod", function( assert ) {
assert.expect( 3 );
$.validator.addMethod( "hi", function( value ) {
Expand Down
0