JSFiddle - React, Tailwind, and code Playground

by alansouzati

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout-validation/1.0.2/knockout.validation.min.js"></script>

JavaScript

function ListingViewModel() {
       var self = this;
       self.country = ko.observable('').extend({
           required: true
       });
       self.city = ko.observable('').extend({
           required: true
       });
       self.cummunity = ko.observable('').extend({
           required: true
       });
       self.subCummunity = ko.observable('').extend({
           required: true
       });
       self.postCode = ko.observable('').extend({
           required: true
       });

       self.isModelValid = function () {

           return validateModel(self);

       };

       self.addListing = function () {

       };
   }

   function validateModel(model) {
       var self = model;
       for (var prop in self) {
           if (self.hasOwnProperty(prop)) {
               if (ko.validation.utils.isValidatable(self[prop]) && !(self[prop].isValid())) {
                   return false;
               }
           }
       }

       return true;

   }

   ko.validation.configure({
       decorateElement: false,
       errorElementClass: "error", // class name
       insertMessages: false,
       grouping: {
           deep: true,
           observable: true
       }
   });

   listingViewModel = new ListingViewModel();
   listingViewModel.country('a');
   listingViewModel.city('a');
   listingViewModel.cummunity('a');
   listingViewModel.subCummunity('a');
   listingViewModel.postCode('1');
   console.log(listingViewModel.isModelValid());