I'm fairly new to Knockout and I'm encountering some issues when validating my form.
HTML
<input data-bind="value: naam" type="text" name="naam" id="naam" placeholder="Naam" required />
<input data-bind="value: email" type="email" name="email" id="email" placeholder="E-mail" required pattern="@" />
Knockout
var OrderInfo = function(){
var self = this;
self.naam = ko.observable().extend({
required: "true",
minLength: 6
});
self.email = ko.observable().extend({
required: "true",
email: {
message: "Gelieve een geldig e-mail adres op te geven.",
params: true
}
});
};
Problems
1) When I enter less than 6 chars at "naam", I get the message Please enter at least 6 characters.
. Yet the class valid
is given to the element. The e-mail input field gets the error class as it should.
2) When I log whether OrderInfo is valid, I always get true, even though I get the error messages;
self.OrderInfo = ko.validatedObservable(self.orderInfo);
console.log("Valid: " + self.OrderInfo.isValid());
I have configured ko.validation like this;
ko.validation.configure({
errorElementClass: 'error',
decorateInputElement: true,
decorateElementOnModified: true,
});
Why is this working for the e-mail field but not the other fields? (I've only posted 1 other field but I got more, same issue for all.) What am I doing wrong?
Issue resolved. The problem was in my HTML. When marking up my form I accidently used the same ID twice.
Stupid mistakes take the longest to find... Thanks for trying to help out!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With