【问题标题】:Knockout validation plugin - show error messages only on form submit淘汰赛验证插件 - 仅在表单提交时显示错误消息
【发布时间】:2014-08-09 16:16:06
【问题描述】:

我正在使用淘汰赛绑定和淘汰赛验证插件 (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

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

});

谢谢。

【问题讨论】:

  • 我想要一百万美元!
  • 说真的,你需要证明你在来这里之前尝试过一些东西,然后说出你想要的。这不是请给我代码网站
  • 主要问题很明显,我认为不需要代码解释 - 有没有办法在表单提交时使用敲除验证插件而不是在模糊事件中调用验证?
  • 我理解这个问题,答案是我相信很简单,这导致:你试过/搜索过吗?
  • 是的,我之前在 Google 上搜索过 - 没有结果,此外,只有在我真的搜索过的情况下,我才会在这个网站上提出问题 :)

标签: knockout.js knockout-validation


【解决方案1】:

我也有这个要求——客户不希望用户在实际尝试提交表单之前看到“红色”。看看这个代码笔 - 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:a@b.com" target="_top">email@example.co.uk</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@info.com" 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>

还有 JS -

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

【讨论】:

    【解决方案2】:

    试试这个:

    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;
            }
            //...
        }
    }
    

    【讨论】:

    • 这段代码不会显示输入模糊的错误信息?我没有看到它的任何配置,showAllMessage 将显示错误,但是在它们首先出现在 blur 事件中之后 - 我错过了什么吗?
    • 您说“我只想在表单提交时为所有视图模型属性调用验证插件逻辑”。这会检查错误,这不是您想要的吗?
    • 对不起,我的意思是在提交时显示错误消息 - 我的错
    • 答案在提交时显示消息。你的意思是你以前不想要它们?
    【解决方案3】:

    有一种方法可以实现,但是需要使用init选项将insertMessages设置为false。

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

    这个代码应该在你的validatedObservable或者extend{required: true}等逻辑被加载之前被调用。在加载任何 viewModel 代码之前,我会在代码文件的顶部调用它。

    接下来,您应该在视图模型中添加一个新的 observable,称为“已提交”

    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 绑定的额外检查。因此,只有在提交表单时才会显示验证消息。

    另外不要忘记,如果您的 validateObservable 具有需要验证的嵌套对象,您可以使用如下分组实例化 validateObservable:

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

    这个 sn-p 来自我的对象工厂,它为我创建我的对象并自动将它们包装在分组的已验证Observables 中。 deep: true 选项意味着 isValid() 将调用它的所有子验证对象 isValid 方法,并且它们都必须为 true 才能使对象有效。 Deep false 意味着只检查已验证的Observable 的值是否为isValid,并且由于它总是有一个值,所以它总是有效的。 Live: true 表示如果对正在验证的依赖可观察对象进行任何更改,验证逻辑将实时重新运行。

    【讨论】:

      猜你喜欢
      • 2012-08-19
      • 2014-02-11
      • 1970-01-01
      • 1970-01-01
      • 2014-12-04
      • 2014-05-28
      • 2013-08-29
      • 2014-04-19
      • 2012-09-05
      相关资源
      最近更新 更多