When applying rule to a class, custom messages applied only to first element
Author: enboigCreated Oct 18, 2022Updated Jun 14, 2023
LabelsType: BugStatus: Verified
Your environment
- Version of
jquery-validate: Master - Browser name and version: Firefox
Current behavior
When aplying a rule to $(".myclass") it is only applied to the first element.
Expected behavior
When selecting a class, rule should be applied to all elements of the class.
Live demo
https://jsbin.com/lozamas/edit?html,console,output
I also codded a unit test when trying to find a solution:
<form id="testForm29" class="testttt">
<div>
<input type="text" name="form29field1" id="form29field1" class="required-field-custom-message">
</div>
<div>
<input type="text" name="form29field2" id="form29field2" class="required-field-custom-message">
</div>
<div>
<input type="text" name="form29field0" id="form29field0">
</div>
</form>QUnit.test( "add rule to class with custom messages", function( assert ) {
assert.expect( 3 );
var form = $( "#testForm29" );
var v = form.validate();
$( "#form29field0" ).rules( "add", {
required: true,
messages: {
required: "Custom message"
}
} );
$( ".required-field-custom-message" ).rules( "add", {
required: true,
messages: {
required: "Custom message"
}
} );
v.form();
var label1 = $( "#form29field1" ).next( ".error:not(input)" ).text();
assert.equal( label1, "Custom message" );
var label2 = $( "#form29field2" ).next( ".error:not(input)" ).text();
assert.equal( label2, "Custom message" );
var label0 = $( "#form29field0" ).next( ".error:not(input)" ).text();
assert.equal( label0, "Custom message" );
} );
Source: jquery-validation/jquery-validation