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

时间:2014-03-20 07:04:02

标签: c# javascript jquery knockout.js

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

<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 ]*$',                
            }

        }),

以上验证工作正常。它会显示消息&#39;此字段是必填字段。&#39;。但默认情况下,此消息显示在文本框下方。我想在文本框的右侧显示它。我该怎么办?能否请您提供我可以解决上述问题的任何代码或链接?

1 个答案:

答案 0 :(得分:0)

您正在使用默认配置和淘汰验证在字段后创建范围以显示默认错误消息。而不是这个,您可以使用validationMessage绑定在任何地方显示错误消息。

结合: -

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

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

 ko.validation.configure({
    insertMessages: false
 });

Fiddle Demo