I'm using knockout binding along with knockout validation plugin (https://github.com/Knockout-Contrib/Knockout-Validation)
I want to show error messages only on form submit and not in input blur, any ideas?
HTML
<div id="formErrorMessages" data-bind="visible: errors().length != 0">
<p data-bind="validationMessage : email"></p>
<p data-bind="validationMessage: firstName"></p>
<span class="arrow-down"></span> </div>
<form id="short-reg-form" method="post" data-bind="validationOptions: { insertMessages:false,decorateInputElement:true,errorElementClass:'input-error' },submit:submit">
<input type="text" name="email" data-bind="value: email" class="email" data-placeholder="Email"/>
<input type="text" name="firstName" data-bind="value: firstName" class="right-input" data-placeholder="First Name"/>
</form>
JS
function viewModel() {
var self = this;
self.showErrorsDiv = ko.observable(false); //Email var emailPlaceholder = getPlaceholder("email"); self.email = ko.observable("") .extend({ ng_required: { params: emailPlaceholder, message: notValidValueReturnString(emailString) }, ng_email: { params:emailPlaceholder, message:notValidValueReturnString(emailString) } }).clearError(); // invoke clearError to prevent validation on page load. //--Email //FirstName var firstNamePlaceholder = getPlaceholder("firstName"); self.firstName = ko.observable("").extend({ ng_required: { params: firstNamePlaceholder, message : notValidValueReturnString(firstNameString) } }); //--FirstName self.submit = function (e) { if (self.errors().length == 0) { // check form validation. alert(true); } else { alert(false); } //prevent form submit default behavior. return false; }; // utilities function getPlaceholder(nameAttributeVal) { return $('#short-reg-form input[name="' + nameAttributeVal + '"]').attr("data-placeholder"); }//--utilities}
$(function () { // attach view model to the DOM var pageModel = new viewModel(); pageModel.errors = ko.validation.group([pageModel.email,pageModel.firstName]); ko.applyBindings(pageModel);});
thanks.
