JSFiddle - React, Tailwind, and code Playground

by grahampcharles

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js"></script>
To see the problem here, try submitting with no input, but then press the button to load a new view model. The .input-validation-error class does not get cleared.
<form id="testform">
<input id="ItemTitle" data-bind="value: ItemTitle" data-val="true" data-val-required="The Title field is required." />
    <button type="submit">Submit</button>
</form>

<button id="newForm" type="button">load a new view model</button>
<button id="newForm2" type="button">load a new view model, but reset the form's validators first</button>

CSS

.input-validation-error {
    border: 1px red solid;
}

JavaScript

$("#testform").on("submit", function(e) {
    if ($("#testform").valid()) { 
         alert("now I'd be submitting");   
    }
    e.preventDefault();
});

$("#newForm").on("click", function() {
    var newobj = { ItemTitle: "a new title"};
    ko.mapping.fromJS(newobj, viewModel);
    
});

$("#newForm2").on("click", function() {
    var newobj = { ItemTitle: "another new title"};
    
    ko.mapping.fromJS(newobj, viewModel);
    $("#testform").validate().resetForm();
    
});



var obj = { ItemTitle: "" };
var viewModel = ko.mapping.fromJS(obj);
ko.applyBindings(viewModel);