文本区域的Dojo验证

问题描述

我试图第一次使用dojo，所以这可能很明显。

我有一个非常简单的形式，其中一个textarea需要要填写。

 < script src =http://ajax.googleapis.com/ajax/libs/dojo/1.10。 3 / dojo / dojo.js>< / script>< form id ='form1'action =method =dojoType =dijit.form.Form> < label for =dob> desc：< / label> < textarea class ='multilinecontrol'dojoType =dijit.form.Textareaselected ='true'required ='true'>< / textarea> < button type ='submit'id =nextname =nextdojoType =dijit.form.Button>下一个< / button>< / form>  

添加必需属性，所以我可以确保该表单在用户可以继续之前有效。

然而，当窗体显示时，textarea有一个红色的焦点环绕没有其他小部件的行为就像这样，它真的很讨厌。

任何想法如何摆脱它？

我可以通过将某些默认文本放在放在这里中，但是我必须进行额外的验证工作 - 我目前无法解决这个问题。

解决方案

而不是复制整个现有的类，只需使用mixin：

  define（[dojo / _base / declare，dojo / _base / lang，dijit / form / SimpleTextarea，dijit / form / ValidationTextBox 
 function（declare，lang，SimpleTextarea，ValidationTextBox）{
 
 return declare（'dijit.form .ValidationTextArea'，[SimpleTextarea，ValidationTextBox]，{
构造函数：function（params）{
 this.constraints = {}; 
 this.baseClass + ='dijitValidationTextArea'; 
}，
 templateString：< textarea $ {！nameAttrSetting} data-dojo-attach-point ='focusNode，containerNode，textbox'autocomplete ='off'>< / textarea>， 
验证器：function（value，constraints）{
 return（new RegExp（^（?:+ this._computeRegexp（constraints）+）+（this.required？ ）+$，[m]））。test（value）&& 
（！this.required ||！this._isEmpty（value））&& 
（this._isEmpty（value）|| this.parse（value，constraints）！== undefined）; // Boolean 
} 
}）
}）
  

不幸的是由于Textarea调整大小，因此我无法像使用验证输入那样获得与红色感叹号完全相同的行为，所以我完成了CSS技巧：

  .dijitValidationTextAreaError，.dijitValidationTextAreaError.dijitTextBoxHover {
 background-image：url（error.png）; 
 background-position：right; 
 background-repeat：no-repeat; 
} 
  

需要将error.png从claro主题复制到您的css位置。它显示在文本区域内，不在外面，但它是唯一的，相当小的区别。

I'm attempting to use dojo for the first time, so this may be be obvious.

I have a very simple form with one textarea in it that needs to be filled in.

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
<form id='form1' action="" method="" dojoType="dijit.form.Form">
  <label for="dob">desc:</label>
  <textarea class='multilinecontrol' dojoType="dijit.form.Textarea" selected='true' required='true'></textarea>
  <button type='submit' id="next" name="next" dojoType="dijit.form.Button">
    Next</button>
</form>

I've added the 'required' property, so i can ensure the form is valid before the user can proceed.

However when the form is show the textarea has a red focus ring around it, None of the other widgets behave like this and its really annoying.

Any idea how to get rid of it?

I could hack it by putting some kind of default text in like 'Put stuff here' but then I have to do extra validation work - which I presently can't work out how to do.

解决方案

Instead of copying the whole existing classes, it's enough to use mixin:

define(["dojo/_base/declare", "dojo/_base/lang", "dijit/form/SimpleTextarea", "dijit/form/ValidationTextBox"],
function(declare, lang, SimpleTextarea, ValidationTextBox) {

  return declare('dijit.form.ValidationTextArea', [SimpleTextarea, ValidationTextBox], {
    constructor: function(params){
      this.constraints = {};
      this.baseClass += ' dijitValidationTextArea';
    },
    templateString: "<textarea ${!nameAttrSetting} data-dojo-attach-       point='focusNode,containerNode,textbox' autocomplete='off'></textarea>",
    validator: function(value, constraints) {
      return (new RegExp("^(?:" + this._computeRegexp(constraints) + ")"+(this.required?"":"?")+"$",["m"])).test(value) &&
        (!this.required || !this._isEmpty(value)) &&
        (this._isEmpty(value) || this.parse(value, constraints) !== undefined); // Boolean
    }
    })
  })

Unfortunatelly, I wasn't able to get exactly the same behaviour with red exclamation sign as with validating input - because of Textarea resizing factility, so I've done the CSS trick:

.dijitValidationTextAreaError, .dijitValidationTextAreaError.dijitTextBoxHover {
 background-image: url("error.png");
 background-position: right;
 background-repeat: no-repeat;
}

The error.png needs to be copied from claro theme to your css location. It is displayed inside the text area, not outside it, but it's the only, quite minor difference.

这篇关于文本区域的Dojo验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！