Validation Form With Knockout.JS

• registerExtenders: registers custom validation rules defined via ko.validation.rules.
• messagesOnModified: indicates whether the validation messages are triggered only when the properties are modified or not at all times.
• insertMessages: If true validation will insert either a <span> element or the template specified by messageTemplate after any element (e.g. <input>), which uses a KO value binding with a validated field.
• parseInputAttributes: indicates whether to assign the validation rules to your ViewModel, using HTML5 validation attributes.
• errorClass: defines CSS class assigned to both <input> and validation message elements.

FirstName property PhoneNumber property Adding an extender that allows an observable to be required and Phone Number pattern, as shown below.

Captcha property

We want to implement captcha in our Form. To do this, we need to use validation: {…} object, then we are adding two parameters, as given below.

• Validator: calls captcha function, which is already defined.
• Message: accepts the string message, which will be displayed, if the error has occurred.
  1. // Captcha Function
  2. var captcha = function(val){
  3. return val == 50;
  4. }
  6. captcha: ko.observable().extend({
  8. //custom Validation
  9. validation:
  10. {
  11. validator: captcha,
  12. message: 'Please check your captcha !!'
  13. }
  14. })

ConfirmPassword property

Also, we are using the validation object, which needs the parameters given below.

• Validator: accepts a function as a parameter, which will compare the password.
• Message: accepts the string message, which will be displayed, if the error has occurred.
• params: provides the password field, which will be compared.
  1. //checkPassword Function
  2. var checkPassword = function(val, other){
  3. return val == other;
  4. }
  6. viewModel.ConfirmPassword = ko.observable().extend({
  8. validation: {
  9. validator: checkPassword,
  10. message: 'Please check your password !',
  11. params: viewModel.Password
  12. }
  14. })