Skip to content

data-validation-depends-on-value only removes error message and styling for last associated input #594

Open
@jbmorganQAA

Description

@jbmorganQAA

If multiple inputs depend on the value of one parent input, only the last of the dependants inputs gets its error styling / messaging removed if the parent input's value is changed.

For example:

<select id="foodType" name="foodType" data-validation="required" data-validation-error-msg="<strong>Food Type</strong> is required.">
	<option value="">Please select...</option>
	<option value="Pizza">Pizza</option>
	<option value="Burger">Burger</option>
	<option value="Curry">Curry</option>
	<option value="Chips">Chips</option>
</select>
<!-- Dependent inputs: -->
<input id="topping1" name="topping1" type="text" data-validation="required" data-validation-depends-on="foodType" data-validation-depends-on-value="Pizza" data-validation-error-msg="<strong>Topping 1</strong> is required."/>
<input id="topping2" name="topping2" type="text" data-validation="required" data-validation-depends-on="foodType" data-validation-depends-on-value="Pizza" data-validation-error-msg="<strong>Topping 2</strong> is required."/>
<input id="topping3" name="topping3" type="text" data-validation="required" data-validation-depends-on="foodType" data-validation-depends-on-value="Pizza" data-validation-error-msg="<strong>Topping 3</strong> is required."/>

If "Pizza" is selected and the form then validated, topping1, topping2 & topping3 will become required and get the error class and message (correct).

If the foodtype select is changed to another option, only topping3 gets its error class and message removed (incorrect).

Please see this JSFiddle: https://jsfiddle.net/28tfq1dn/

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions