JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <h3>Normal Validation</h3>
            <form role="form" data-bind="submit: submitFormTraditional">
                <div class="form-group">
                    <input type="file" name="fileHere" />
                    <label>First Name</label>
                    <input type="text" class="form-control" placeholder="Enter first name" required data-bind="value: firstName" />
                </div>
                <div class="form-group">
                    <label>Last Name</label>
                    <input type="text" class="form-control" placeholder="Enter last name" required data-bind="value: lastName" />
                </div>
                <button class="btn btn-default" type="submit">Submit</button>
            </form>
        </div>
        <div class="col-sm-6" style="border-left: 2px solid orange">
            <h3>A Href Validation</h3>
            <form name="hrefForm" role="form" data-bind="submit: submitFormHref">
                <div class="form-group">
                    <label>Phone Number</label>
                    <input type="text" class="form-control" placeholder="Enter phone number" pattern="^[\d]{3}-[\d]{3}-[\d]{4}$" title="Your phone number must all digits in the format (XXX-XXX-XXXX)" required data-bind="value: phoneNum" />
                </div>
                <div class="form-group">
                    <label>E-Mail</label>
                    <input type="email" class="form-control" placeholder="Enter email" required data-bind="email" />
                </div>
                <a class="btn btn-primary" href="#" data-bind="clickSubmit: 'hrefForm'"><i class="fa...

JavaScript

ko.bindingHandlers.clickSubmit = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        var formElement = null;        
        if(typeof jQuery == 'undefined') {
            var value = ko.utils.unwrapObservable(valueAccessor());
            if(!value)
                // Need to have a value which contains the name of our parent form.
                throw new Error('You must provide a parameter for the binding "clickSubmit" if you are not using jQuery.');
            formElement = document.forms[value];
        } else {
            var jqFormElement = $(element).closest('form');
            formElement = jqFormElement.get(0);
        }
        
        if(!formElement) {
            throw new Error('"clickSubmit" binding could not find the parent form')
        }
        
        var hiddenSubmit = document.createElement('input');
        hiddenSubmit.setAttribute('type','submit');
        hiddenSubmit.style.display = 'none';
        
        formElement.appendChild(hiddenSubmit);
        
        var newFunction = function() {
            return function() {
                hiddenSubmit.click();
            };
        };
        
        ko.bindingHandlers.click.init(element, newFunction, allBindings, viewModel, bindingContext);
    }
};

var ViewModel = function() {
    var self = this;
    
    self.firstName = ko.observable();
    self.lastName = ko.observable();
    self.phoneNum = ko.observable();
    self.email = ko.observable();
    
    self.submitFormTraditional = function() {
        alert('Form Validated using a type="submit"');
    };
    
    self.submitFormHref = function() {
        alert('Form Validated using a hidden type="submit"');
    };
};

ko.applyBindings(new ViewModel());