JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>
<input type="text" data-bind="event: {'keypress': enterKey}, value: customer.telephone">
<br>
<input type="button" data-bind="click: sendCustomer" value="send">

JavaScript

Customer = function () {
    var self = this;

    self.telephone = ko.observable().extend({
        number: true,
        required: {
            required: true,
            message: 'You must enter a number!'
        }
    });
}

vm = function () {
    //Init
    customer = new Customer();

    //Validationsteps
    firstValidation = ko.validation.group([customer.telephone], {
        observable: true
    }),

    //Methods
    sendCustomer = function () {
        if (firstValidation().length == 0) {
            alert("method1 is triggered!");
        } else {
            firstValidation.showAllMessages();
        }
    }

    enterKey = function (d, e) {
        if (e.keyCode == 13) {
            alert("enter has been pressed..");
            sendCustomer();
        }
        return true;
    }

    return {
        customer: customer,
        sendCustomer: sendCustomer,
        firstValidation: firstValidation
    }
}();


ko.applyBindings(vm);