使用扩展器进行 Knockout.js 验证 - 防止加载时验证

2023-12-21

我已经对“名字”实施了非常基本的必需验证,很大程度上基于淘汰赛网站上建议的示例(http://knockoutjs.com/documentation/extenders.html http://knockoutjs.com/documentation/extenders.html) - 实例 2:向 observable 添加验证。

我的问题是我不希望在首次加载表单时触发验证。下面是我的代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<link href="Style.css" rel="stylesheet" />
</head>
<body>
<p data-bind="css: { error: firstName.hasError }">
    <span>First Name</span>
    <input data-bind='value: firstName, valueUpdate: "afterkeydown"' />
    <span data-bind='visible: firstName.hasError, text: firstName.validationMessage'></span>
</p>
<p>
    <span>Last Name</span>
    <input type="text" data-bind="value: lastName, valueUpdate: 'afterkeydown'" />
</p>

<div data-bind="text: fullName" />
<script src="Scripts/jquery-2.0.3.js"></script>
<script src="Scripts/knockout-2.3.0.debug.js"></script>
<script src="script.js"></script>
</body>
</html>

var AppViewModel = function () {
var firstName = ko.observable().extend({ required: "Please enter First Name" }),
    lastName = ko.observable(),
    fullName = ko.computed(function () {
        return firstName() + " " + lastName();
    });
return {
    firstName: firstName,
    lastName: lastName,
    fullName: fullName
};
};


ko.extenders.required = function (target, overrideMessage) {
//add some sub-observables to our observable
target.hasError = ko.observable();
target.validationMessage = ko.observable();

//define a function to do validation
function validate(newValue) {

    target.hasError($.trim(newValue) ? false : true);
    target.validationMessage($.trim(newValue) ? "" : overrideMessage || "This field is    required");
}

//initial validation
validate(target());

//validate whenever the value changes
target.subscribe(validate);

//return the original observable
return target;
};



var viewModel = new AppViewModel();
ko.applyBindings(viewModel);

您将在此链接中看到我面临的问题的演示http://jsfiddle.net/tCP62/22/`` http://jsfiddle.net/tCP62/22/

请注意,我提供给演示的 JSFiddle 链接显示了该问题 - 在“Chrome”中有效,但在 IE 中无效。

请任何人都可以帮我解决这个问题。

问候, 安库什


只需删除以下行,它就可以执行您想要的操作:

//initial validation
validate(target());

The required页面加载时会调用扩展器,并且由于它包含上述调用,因此会立即触发验证。下一行代码target.subscribe(validate);确保当可观察值更改时触发它(如注释所述)。在这种情况下,这就是您所需要的。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用扩展器进行 Knockout.js 验证 - 防止加载时验证 的相关文章

  • 如果替换路径中的最后一个元素,React Router v6 useNavigate() 不会导航

    我有一个具有以下功能的反应组件 const handleNavigate clientId gt console log clientId navigate dashboard clients clientId console log 显示
  • 如何使用 JavaScript 将当前页面设置为 about:blank?

    我遇到的情况是服务器可能在当前地址上不可用 因此我想检测到这一点并将页面重定向到 about blank 页面 我该如何使用 JavaScript 来做到这一点 window location href about blank
  • 将随机字符串转换为十六进制颜色

    我的应用程序中有一个操作日志表 我想根据该条目的 sessionID 为行分配随机颜色 以帮助查看模式 分组操作 到目前为止我有这个 console log stringToColorCode mj3bPTCbIAVoNr93me1I fu
  • 用不同的颜色为 Google 热图着色

    我试图开发一个遵循 Google Map API 的热度 https developers google com maps documentation javascript examples layer heatmap https deve
  • 如何创建一个多重过滤函数来过滤掉多个属性?

    我有一个要过滤的对象数组 name Apple age 24 model Android status Under development name Roboto age 24 model Apple status Running 我需要使
  • 如何在 JS Rails 响应中包含 HTML?

    我有一个响应 HTML 和 JS AJAX 查询的 FooController app controllers foo controller rb class FooController lt ApplicationController l
  • 在每页上插入折叠标记 (wkhtmltopdf)

    我正在使用 wkhtmltopdf 0 12 2 1 创建发票等 我需要在 pdf 的每一页上显示折叠标记 如果内容大于一页 如何在每个页面上使用 javascript 重复它们 这是我的基本标记 div class marks div c
  • 缩放事件侦听器之前的 Javascript OpenLayers

    我正在尝试将 OpenLayers 设置为在缩放开始之前不显示矢量图层 并使其在缩放结束后重新出现 我已经像这样建立了缩放结束部分 map new OpenLayers Map map element eventListeners zoom
  • 使用 javascript 禁用按钮:FF 与 IE

    我有一排按钮 它们都会创建一个我想在新选项卡中打开的 pdf 文件 这样按钮页面就会保持在顶部 并且 pdf 会打开以进行打印 为了防止单击按钮两次 我禁用该按钮 如下所示 我使用 python
  • nodejs mocha suite 未定义错误

    我正在尝试使用摩卡运行一些测试 但似乎无法克服这个错误 E tdd nodejs cart gt mocha cart test js node js 201 throw e process nextTick error or err Re
  • 这种 JavaScript 编码风格有什么问题? (闭包与原型)

    我们一直在讨论如何最好地处理我们的 JS 应用程序中的对象 研究 Stoyan Stefanov 的书 阅读无数关于 新 这个 原型 闭包等的 SO 帖子 事实上有很多 而且它们有这么多相互竞争的理论 表明没有完全明显的答案 让我们假设我们
  • 通过多个回调优雅地传递“点击事件”

    当未登录的用户单击给定的按钮时 我想停止该事件 收集他的 oauth 收集他的电子邮件 如果我没有 然后执行该事件 我想用 javascript 来做所有事情 因为这会让事情变得更加简单 这就是我执行它的方式 我有两个问题 有没有更优雅的方
  • 如何查看网站浏览者的操作系统?

    我运行的是 Ubuntu 8 04 最近在访问网站时收到以下错误 请使用运行 Windows 98 2000 Me NT 或 XP 的计算机返回 www site com 网站如何知道我正在运行哪个操作系统 是仅通过 javascript
  • 限制 jQuery id 字符串吗?

    简而言之 我的问题是字符串在 jQuery 中作为可搜索 id 或可搜索内容有什么限制 更新 我得到了 ID 部分 但不是为什么我什至无法使用该字符串搜索 html 内容 对于任何愿意告诉我一个正则表达式来将模式从 MM dd yy HH
  • 一个接一个地淡入div

    大家好 我很擅长 HTML 和 CSS 但才刚刚开始接触 jQuery 的皮毛 我希望让 3 个 div 在页面加载时逐渐淡入 到目前为止我有这个 我听说使用 css 将显示设置为 none 对于任何使用非 JavaScript 浏览器的人
  • Jquery 两个字段的时间差(以小时为单位)

    我的表单中有两个字段 用户可以在其中选择输入时间 start time end time 我想在更改这些字段时重新计算另一个字段的值 我想做的是获取两次之间的小时数 例如 如果我的开始时间为 5 30 结束时间为 7 50 我想将结果 2
  • 将 div 文本分配给变量然后显示它

    我有一个简单的任务 我试图完成学习 JavaScript 但一直无法找到明确的答案 这是代码 div Testing div 基本上我希望将方框 div 中的文本存储到变量中 然后 我想在页面的不同部分显示该变量的文本 使用上面的代码我得到
  • 更改javascript nodejs中所有页面的href url

    我已经实现了具有多种语言下拉菜单的引导导航栏 当我选择语言时 它将翻译页面 如何更改其他页面的 url 和按钮文本 当我选择french 将所有网址更改为 fr about and fr contact 如何使用 JavaScript 进行
  • 使用 javascript Array reduce() 方法有什么真正的好处吗?

    reduce 方法的大多数用例都可以使用 for 循环轻松重写 对 JSPerf 的测试表明 reduce 通常会慢 60 75 具体取决于每次迭代内执行的操作 除了能够以 函数式风格 编写代码之外 还有什么真正的理由使用reduce 吗
  • 利用重力效果拖动元素

    我想完成类似于 photoshop com 和此网站的功能 http mrdoob com projects chromeexperiments google gravity http mrdoob com projects chromee

随机推荐