如何在knockout js中对齐文本框右侧的验证文本

本文关键字：文本 验证 对齐 knockout js | 更新日期: 2023-09-27 17:50:59

在我的应用程序中，我有一个文本框如下

<div class="col-xs-12 col-sm-5">
   <span class="block input-icon input-icon-right">
      <input type="text" data-bind="value: $root.createClassModelView.classTitle" maxlength="50" title="Class title" placeholder="Ex. 'Ph.D. in Mechanical Engineering'" class="width-100" />
   </span>
</div>

在我的js文件中，我应用验证如下

classTitle: ko.observable().extend({
            required: true,
            minLength: 5,
            maxLength: 50,           
            pattern: {
                message: 'Class name should only contain alphabet and numbers.',
                params: '^[a-zA-Z0-9 ]*$',                
            }
        }),

上面的验证工作正常。它显示消息"此字段是必需的。"但是此消息默认显示在文本框下方。我想把它显示在文本框的右侧。我该怎么做呢?你能提供给我任何代码或链接，我可以通过它来解决上述问题吗?

如何在knockout js中对齐文本框右侧的验证文本

您正在使用默认配置和淘汰验证，在字段后面创建span以显示默认错误消息。相反，你可以使用validationMessage绑定来显示任何你想要的错误消息。

绑定:

 <span data-bind="validationMessage:classTitle "></span>

通过将insertMessages配置设置为false来停止默认错误消息的插入。

 ko.validation.configure({
    insertMessages: false
 });
<<p> 小提琴演示/strong>
相关文章：