Плагин проверки Knockout - показывать сообщения об ошибках только при отправке формы

Я использую нокаутную привязку вместе с плагином нокаутной проверки (https://github.com/Knockout-Contrib/Knockout-Validation)

Я хочу показывать сообщения об ошибках только при отправке формы, а не при размытии ввода, есть идеи?

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

функция просмотра модели () {

переменная самость = это;

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);

});

благодаря.


person Samih A    schedule 19.06.2014    source источник
comment
И я хочу миллион долларов!   -  person GôTô    schedule 19.06.2014
comment
Серьезно, вам нужно показать, что вы что-то пробовали, прежде чем прийти сюда, и просто сказать, что вы хотите. Это не сайт пожалуйста, код для меня   -  person GôTô    schedule 19.06.2014
comment
главный вопрос очевиден, как я думал, и не требует объяснения кода - есть ли способ вызвать проверку с помощью плагина проверки нокаута только при отправке формы, а не в событии размытия?   -  person Samih A    schedule 19.06.2014
comment
Я понимаю вопрос, и ответ, я считаю, довольно прост, что приводит к: вы пробовали/искали?   -  person GôTô    schedule 19.06.2014
comment
да, я раньше искал в Google - никаких результатов, кроме того, я задавал вопрос на этом сайте, только если я действительно искал :)   -  person Samih A    schedule 19.06.2014


Ответы (3)


У меня также есть это требование - клиент не хотел, чтобы пользователь видел «красный» перед попыткой отправить форму. Ознакомьтесь с этой кодовой ручкой — http://codepen.io/dmoojunk/pen/zxqYbb.

HTML -

<div class="container no-padding">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="col-md-4 col-sm-4 col-xs-12">
            <div>
                <div>
                    <p>Phone: <a href="tel:0123456789">0123456789</a></p>
                    <p>Email: <a href="mailto:[email protected]" target="_top">[email protected]</a></p>
                    <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
                </div>
            </div>
        </div>

        <div class="col-md-8 col-sm-8 col-xs-12">
            <div>
                <div>
                    <form role="form">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group" data-bind="validationElement: firstName">
                                    <label class="control-label" for="contact-name">First Name</label>
                                    <input type="text" class="form-control" id="contact-name" placeholder="i.e Joe" data-bind="textInput: firstName"/>
                      <span class="help-block" data-bind="validationMessage: firstName"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group" data-bind="validationElement: email">
                                    <label class="control-label" for="contact-email">Email</label>
                                    <input type="email" class="form-control" id="contact-email" placeholder="i.e [email protected]" data-bind="textInput: email"/>
                      <span class="help-block" data-bind="validationMessage: email"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group" data-bind="validationElement: surname">
                                    <label class="control-label" for="contact-surname"> Surname</label>
                                    <input type="text" class="form-control" id="contact-surname" placeholder="i.e Bloggs" data-bind="textInput: surname"/>
                      <span class="help-block" data-bind="validationMessage: surname"></span>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group" data-bind="validationElement: category">
                                    <label class="control-label" for="contact-topic">Please select a category</label>
                                    <select class="form-control" id="contact-topic" data-bind="value: category">
                                        <option value="">Select category</option>
                                        <option value="general">General contact</option>
                                        <option value="issue">Report an issue</option>
                                        <option value="help">Help enquiry</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group" data-bind="validationElement: message">
                                <label class="control-label" for="contact-textarea">Write your message here, the more detail the better</label>
                              <textarea style="width:100%" id="contact-textarea" placeholder="Place message here" rows="10" data-bind="textInput:message"></textarea>
                   <span class="help-block" data-bind="validationMessage: message"></span>
                            </div>
                            <button type="button" class="btn btn-green" data-bind="click: submit">Get in touch</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

И ЖС-

var mynamespace = mynamespace || {};

ko.validation.init({
  errorElementClass: 'has-error',
  errorMessageClass: 'help-block',
  decorateElement: true,
  insertMessages: false
});

//Viewmodel
mynamespace.ContactUsViewModel = function(){
  var self = this;
  self.validationEnabled = ko.observable(false);
  self.isValidationEnabled = function() {
    return self.validationEnabled();
  }
  self.firstName = ko.observable('').extend({
    required: {
      onlyIf: self.isValidationEnabled
    },
    minLength: {
      onlyIf: self.isValidationEnabled,
      params: 5
    } 
  });
  self.email = ko.observable('').extend({
    required: {
      onlyIf: self.isValidationEnabled
    },
    email: {
      onlyIf: self.isValidationEnabled
    }
  });
  self.surname = ko.observable('').extend({
    required: {
      onlyIf: self.isValidationEnabled
    },
    minLength: {
      onlyIf: self.isValidationEnabled,
      params: 5
    } 
  });
  self.category = ko.observable('').extend({
    required: {
      onlyIf: self.isValidationEnabled
    },
    minLength: {
      onlyIf: self.isValidationEnabled,
      params: 1
    } 
  });
  self.message = ko.observable('').extend({
    required: {
      onlyIf: self.isValidationEnabled
    },
    minLength: {
      onlyIf: self.isValidationEnabled,
      params: 5
    } 
  });
  self.submit = function() {
    self.validationEnabled(true);
    if (!this.isValid()) {
      this.errors.showAllMessages();
    } else {
      alert('Form Valid');
    };
  }
};

var viewmodel = ko.validatedObservable(new mynamespace.ContactUsViewModel())();
ko.applyBindings(viewmodel);
person dmoo    schedule 11.12.2014

Попробуй это:

var viewmodel = function () {
    var self = this;
    //...
    this.errors = ko.validation.group(this, { deep: true });

    this.submitViewModel = function () {
        if (self.errors().length > 0) {
            self.errors.showAllMessages(true);
            return;
        }
        //...
    }
}
person GôTô    schedule 19.06.2014
comment
этот код не будет отображать сообщения об ошибках при размытии ввода? я не вижу никакой конфигурации для этого, showAllMessage покажет ошибки, но после того, как они появятся в событии размытия в первую очередь - я что-то упустил? - person Samih A; 19.06.2014
comment
Вы сказали, что я хочу вызывать логику плагина проверки для всех свойств модели представления только при отправке формы. Это проверяет наличие ошибок, разве это не то, что вы хотите? - person GôTô; 19.06.2014
comment
извините, я хотел показать сообщение об ошибке при отправке - моя вина - person Samih A; 19.06.2014
comment
Ответ показывает сообщения об отправке. Вы имеете в виду, что не хотите их раньше? - person GôTô; 19.06.2014
comment
Я отредактировал свой код, как описано - сообщения по-прежнему появляются при размытии ввода, я добавил свой код к основному вопросу выше, я думаю, что это ошибка плагина. - person Samih A; 19.06.2014
comment
аналогичная проблема открыта на GitHub - github.com/Knockout-Contrib/Knockout-Validation /вопросы/299 - person Samih A; 21.06.2014
comment
Проголосовали против, потому что это игнорирует четкое требование заданного вопроса. - person Slight; 08.05.2015
comment
@ Немного я полагаю, что вопрос был отредактирован после того, как этот ответ был опубликован - person GôTô; 18.05.2015

Есть способ добиться этого, но вам нужно использовать параметры инициализации, чтобы установить для вставки сообщений значение false.

ko.validation.init({
    insertMessages: false,
    messagesOnModified: true,
    parseInputAttributes: false
});

Этот код следует вызывать до того, как будет загружена логика validatedObservable или extend{required: true} и т.д. Я вызываю это в верхней части моего файла кода до того, как какой-либо код моей модели просмотра будет загружен.

Затем вы должны добавить новую наблюдаемую модель к вашей модели представления, которая называется что-то вроде «отправлено».

var submitted = ko.observable(false);

Теперь, нажав кнопку отправки, вы делаете что-то вроде этого:

var saveDraft = function () {
    submitted(true);
    var isValid = poll.isValid();
    if (!isValid) {
        console.log('not valid!');
        poll.errors.showAllMessages(true);
        return;
    }
}
model.saveDraft = saveDraft;

Затем вам нужно будет вручную разместить сообщения проверки в разметке, например:

    <div class="form-group">
        <div class="col-md-12">
            <label for="txtPollName" data-bind="">POLL NAME</label>
            <input type="text" class="form-control" id="txtPollName" placeholder="Enter a unique name for the poll." data-bind="value: poll().name">
            <div class="invalid-feedback" data-bind="visible: submitted(), validationMessage: poll().name">
            </div>
        </div>
    </div>

Обратите внимание, что в разметке я добавил дополнительную проверку привязки validationMessage, добавив видимую привязку. Таким образом, сообщение проверки будет отображаться только в том случае, если форма была отправлена.

Также не забывайте, что если ваш validatedObservable имеет вложенные объекты, которые необходимо проверить, вы можете создать экземпляр validatedObservable с группировкой следующим образом:

this.createPoll = function (parent, options) {
    var poll = new pollObject(parent, options);
    if (options && options.plain)
        return poll;
    var obs = ko.validatedObservable(null, { deep: true, live: true });
    obs(poll);
    return obs;
}

Этот фрагмент из моей фабрики объектов, которая создает мои объекты для меня и автоматически упаковывает их в сгруппированные validatedObservables. Параметры deep: true означают, что isValid() будет вызывать все методы isValid своих дочерних объектов проверки, и все они должны быть истинными, чтобы объект был действительным. Deep false означает, что только значение validatedObservable проверяется на isValid, и, поскольку оно всегда имеет значение, оно всегда будет действительным. Live: true означает, что логика проверки будет перезапущена, если будут сделаны какие-либо изменения в проверяемых зависимых наблюдаемых объектах в режиме реального времени.

person Ryan Mann    schedule 18.12.2018