CODEWITHSUNDEEP
javascripthtmlinputknockout.js
Euphe
Euphe

Reputation: 3699

Knockout: how to make input required if a field was filled and not required when it's empty

I want to make a password change form. It should be displayed on the settings page at any time and be not required to be filled. However if at least one of three fields (old pass, new pass, confirm) is filled others should become required.

Can I achieve that?

Here is my temporary code

    self.oldPass = ko.observable().extend({ minLength: 6, maxLength: 20, validation: { validator: checkEqual, message: 'Неверный пароль.', params: self.password } });
    self.newPass = ko.observable().extend({ minLength: 6, maxLength: 20, validation: { validator: newPassValid, message: 'Неверный пароль.' } });
    self.newPassCheck = ko.observable().extend({ minLength: 6, maxLength: 20, validation: { validator: checkEqual, message: 'Пароли не совпадают.', params: self.newPass } });

function newPassValid(pass){

}
function checkEqual(val, other){
     return val == other();
}

Upvotes: 0

Views: 2709

Answers (1)

Ivan.Srb
Ivan.Srb

Reputation: 1851

You could try Conditional Validation with onlyIf: 

self.oldPass = ko.observable().extend({
    required: {           
        onlyIf: function () { 
            var isNewPassFilled = self.newPass() && self.newPass().length > 0;
            var isNewPassCheckFilled = self.newPassCheck() && self.newPassCheck().length > 0;
            return isNewPassFilled || isNewPassCheckFilled; 
        }
    },
    minLength: 6,
    maxLength: 20, 
    validation: { 
        validator: checkEqual,
        message: 'Wrong password',
        params: self.password 
    },
});

Upvotes: 2

Related Questions