Dojo отображает несколько подсказок на странице

У меня есть форма Dojo, и я хотел бы возвращать ошибки в форму и отображать их в подсказках, поскольку я не хочу добавлять дополнительные элементы в свой макет формы. При исследовании я увидел, что Dojo не допускает такую ​​реализацию из коробки, так как подсказка будет отображаться только в фокусе. В моем случае я хотел бы, чтобы подсказки отображались для нескольких элементов, например для всех пустых полей.

Я наткнулся на блог, где парень взломал, но я не уверен в его реализации. Я хотел бы отобразить несколько подсказок для нескольких элементов. Вот также часть того, что я сделал до сих пор. Подсказка отображается только для последнего элемента.

Форма додзё

<body class="claro">
    <input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="
            regExp: '[\\w]+',
            required: true,
            invalidMessage: 'First Name Required !'" id="fnameTextBox" title="First Name" placeholder="Your First Name" />
    <input data-dojo-type="dijit/form/ValidationTextBox" data-dojo-props="
            regExp: '[\\w]+',
            required: true,
            invalidMessage: 'Last Name Required !'" id="lnameTextBox" title="Last Name" placeholder="Your Last Name" />
    <button id="validateFields" data-dojo-type="dijit/form/Button">Validate</button>
</body>

Javascript

 dojo.require("dijit/form/Button");
 dojo.require("dijit/form/ValidationTextBox");
 dojo.require("dijit/Tooltip");

 dojo.ready(function () {

     var fName = dijit.byId("fnameTextBox");
     var lName = dijit.byId("lnameTextBox");

     dojo.connect(dijit.byId("validateFields"), "onClick", function () {

         dijit.showTooltip(
         fName.get('invalidMessage'),
         fName.domNode,
         fName.get('tooltipPosition'), !fName.isLeftToRight());

         dijit.showTooltip(
         lName.get('invalidMessage'),
         lName.domNode,
         lName.get('tooltipPosition'), !lName.isLeftToRight());


     });

 });
Источник

1 ответ

Решение

Показывать все подсказки не рекомендуется с точки зрения пользовательского опыта. Хотя все недействительные поля могут быть выделены. Подсказка предназначена для отображения только тогда, когда мы сосредоточены на нем. В вашем случае вы перемещаете фокус на поле фамилии, добавляя "dijit.showTooltip". Я обновил твой код. Пожалуйста, обратитесь - http://jsfiddle.net/ZtzTE/26/

dojo.connect(dijit.byId("validateFields"), "onClick", function() {      
   var myform = dijit.byId('myform');
   myform.connectChildren();
   myform.validate();
});

"connectChildren" - соединить все поля с формой перед проверкой. (Обратите внимание, что некоторые поля могли быть добавлены программно позже). (Примечание. Я добавил атрибут "missingMessage" в текстовые поля проверки, если вы их пропустили. Потому что "Недопустимое сообщение" и "missingMessage" различаются).

Если поля не заполнены, форма по умолчанию будет фокусироваться на первом поле. Итак, изначально сообщение появится для первого поля, даже если оно не сфокусировано. Но если первое поле заполнено и никакое другое поле не сфокусировано, тогда пропущенное сообщение появляется только тогда, когда фокус сделан на соответствующем поле. То же самое относится и к неверному вводу и сообщению.

Частичная проверка формы: если в форме нужно проверить только несколько полей, мы можем сделать это вручную. http://jsfiddle.net/ZtzTE/29/ - Проверьте этот полный пример (обновлено)

// cp1 и cp2 - две панели содержимого контейнера вкладок

var mytab1 = dijit.byId("cp1");
var canNavigate = true;
var highlight = function(widget){
   var v = widget.validate;
   if(!v) return true;
   widget._hasBeenBlurred = true;
   if(!widget.validate()) {
     canNavigate = false;
   }
};
dojo.forEach(mytab1.getChildren(), highlight);
if(canNavigate) {
   dijit.byId("tc").selectChild("cp2");
}
Источник
Другие вопросы по тегам