Skip to content

Commit 90cfe2d

Browse files
victorjonssonvictorjonsson
committed
Fixed bug in depends-on
1 parent ca27d93 commit 90cfe2d

File tree

3 files changed

+163
-23
lines changed

3 files changed

+163
-23
lines changed

‎src/modules/location.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,16 +57,19 @@
5757
*/
5858
var _makeSortedList = function(listItems) {
5959
var newList = [];
60-
$.each(listItems, function(i, v) {
61-
newList.push(v.substr(0,1).toUpperCase() + v.substr(1, v.length));
60+
$.each(listItems, function(i, value) {
61+
newList.push(value.substr(0,1).toUpperCase() + value.substr(1, value.length));
6262
});
6363
newList.sort();
6464
return newList;
6565
};
6666

6767
$.fn.suggestCountry = function(settings) {
68-
var country = _makeSortedList($.formUtils.validators.validate_country.countries);
69-
return $.formUtils.suggest(this, country, settings);
68+
var countries = _makeSortedList($.formUtils.validators.validate_country.countries),
69+
usaIndex = $.inArray(countries, 'Usa');
70+
71+
countries[usaIndex] = 'USA';
72+
return $.formUtils.suggest(this, countries, settings);
7073
};
7174

7275
$.fn.suggestState = function(settings) {

‎src/modules/logic.js

Lines changed: 74 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -13,41 +13,96 @@
1313

1414
'use strict';
1515

16-
var setupValidationDependsOn = function($form) {
16+
var setupValidationDependsOn = function($form, conf) {
1717

18-
$form.find('[data-validation-depends-on]')
19-
.on('beforeValidation', function() {
18+
var dependingOnBeforeValidation = function() {
2019

21-
var $elem = $(this),
22-
nameOfDependingInput = $elem.valAttr('depends-on') || $elem.valAttr('if-checked');
20+
var $elem = $(this),
21+
nameOfDependingInput = $elem.valAttr('depends-on') || $elem.valAttr('if-checked');
2322

24-
// Whether or not this input should be validated depends on if another input has a value
25-
if (nameOfDependingInput) {
23+
// Whether or not this input should be validated depends on if another input has a value
24+
if (nameOfDependingInput) {
2625

27-
// Set the boolean telling us that the validation depends
28-
// on another input being checked
29-
var valueOfDependingInput = $.formUtils.getValue('input[name="' + nameOfDependingInput + '"]', $form),
30-
requiredValueOfDependingInput = $elem.valAttr('depends-on-value'),
31-
dependingInputHasRequiredValue = !requiredValueOfDependingInput || requiredValueOfDependingInput === valueOfDependingInput;
26+
// Set the boolean telling us that the validation depends
27+
// on another input being checked
28+
var valueOfDependingInput = $.formUtils.getValue('[name="' + nameOfDependingInput + '"]', $form),
29+
requiredValueOfDependingInput = $elem.valAttr('depends-on-value'),
30+
dependingInputIsMissingValueOrHasIncorrectValue = !valueOfDependingInput || (
31+
requiredValueOfDependingInput &&
32+
requiredValueOfDependingInput !== valueOfDependingInput
33+
);
3234

33-
if (!dependingInputHasRequiredValue) {
34-
$elem.valAttr('skipped', true);
35-
}
35+
if (dependingInputIsMissingValueOrHasIncorrectValue) {
36+
$elem.valAttr('skipped', '1');
3637
}
3738

39+
}
40+
},
41+
dependingOnValueChanged = function() {
42+
var $input = $(this),
43+
valueOfDependingInput = $.formUtils.getValue($input),
44+
requiredValueOfDependingInput = $input.valAttr('depending-value'),
45+
dependingInputIsMissingValueOrHasIncorrectValue = !valueOfDependingInput || (
46+
requiredValueOfDependingInput &&
47+
requiredValueOfDependingInput !== valueOfDependingInput
48+
);
49+
50+
if (dependingInputIsMissingValueOrHasIncorrectValue) {
51+
console.log(this.$dependingInput);
52+
$.formUtils.dialogs.removeInputStylingAndMessage(this.$dependingInput, conf);
53+
} else if ($.formUtils.getValue(this.$dependingInput)) {
54+
this.$dependingInput.validate();
55+
}
56+
};
57+
58+
$form.find('[data-validation-depends-on]')
59+
.off('beforeValidation', dependingOnBeforeValidation)
60+
.on('beforeValidation', dependingOnBeforeValidation)
61+
.each(function() {
62+
// Remove validation when on depending input
63+
var $dependingInput = $(this);
64+
$form.find('[name="'+$dependingInput.valAttr('depends-on')+'"]').each(function() {
65+
this.$dependingInput = $dependingInput;
66+
$(this)
67+
.off('change', dependingOnValueChanged)
68+
.on('change', dependingOnValueChanged)
69+
.valAttr('depending-value', $dependingInput.valAttr('depends-on-value'));
70+
})
71+
3872
});
3973

4074
},
41-
setupValidationIfAnswered = function() {
75+
setupValidationTogetherWith = function($form) {
76+
$form.find('[data-validation-optional-if-answered]')
77+
.on('beforeValidation', function() {
78+
var $input = $(this),
79+
dependingInputs = $input.valAttr('optional-if-optional-if-answered'),
80+
dependingInputsHasValue = false,
81+
thisInputHasAnswer = $.formUtils.getValue($input) ? true:false;
82+
83+
if (!thisInputHasAnswer) {
84+
$.each($.split('dependingInputs'), function(inputName) {
85+
var $dependingInput = $form.find('[name="'+inputName+'"]');
86+
dependingInputsHasValue = $.formUtils.getValue($dependingInput) ? true:false;
87+
if (dependingInputsHasValue) {
88+
return false;
89+
}
90+
});
4291

92+
if (dependingInputsHasValue) {
93+
$input.valAttr('skipped', 1);
94+
}
95+
}
96+
97+
});
4398
};
4499

45-
$.formUtils.$win.bind('validatorsLoaded formValidationSetup', function(evt, $form) {
100+
$.formUtils.$win.bind('validatorsLoaded formValidationSetup', function(evt, $form, conf) {
46101
if( !$form ) {
47102
$form = $('form');
48103
}
49-
setupValidationDependsOn($form);
50-
setupValidationIfAnswered($form);
104+
setupValidationDependsOn($form, conf);
105+
setupValidationTogetherWith($form);
51106
});
52107

53108
})(jQuery);

‎test/logic.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Module Logic</title>
6+
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-wip/css/bootstrap.min.css">
7+
</head>
8+
<body>
9+
10+
<div>
11+
<form action="" style="margin: 3% auto; max-width: 400px" role="form">
12+
13+
<h3>data-validation-depends-on</h3>
14+
15+
<div class="form-group">
16+
<label class="control-label">
17+
Contact me &nbsp;
18+
<input name="do-contact" type="checkbox" value="1" />
19+
</label>
20+
</div>
21+
22+
<div class="form-group">
23+
<label class="control-label">E-mail</label>
24+
<input class="form-control"
25+
type="text"
26+
data-validation="email"
27+
data-validation-depends-on="do-contact"
28+
/>
29+
</div>
30+
31+
32+
<div class="form-group">
33+
<label class="control-label">Country</label>
34+
<input class="form-control"
35+
type="text"
36+
name="country"
37+
data-validation="country"
38+
data-validation-error-msg="You have to answer with a country"
39+
autocomplete="off"
40+
/>
41+
</div>
42+
43+
<div class="form-group">
44+
<label class="control-label">US state</label>
45+
<input class="form-control"
46+
type="text"
47+
name="state"
48+
data-validation="federatestate"
49+
data-validation-depends-on="country"
50+
data-validation-depends-on-value="Usa"
51+
/>
52+
</div>
53+
54+
55+
56+
<div class="form-group">
57+
<button type="submit">Login</button>
58+
</div>
59+
60+
</form>
61+
</div>
62+
63+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
64+
<script src="../form-validator/jquery.form-validator.js"></script>
65+
<script>
66+
67+
$.validate({
68+
modules: 'logic, location',
69+
onSuccess: function() {
70+
alert('valid');
71+
return false;
72+
},
73+
onModulesLoaded: function() {
74+
$('input[name="country"]').suggestCountry();
75+
$('input[name="state"]').suggestState();
76+
}
77+
});
78+
79+
</script>
80+
81+
</body>
82+
</html>

0 commit comments

Comments
 (0)