Блог

У меня есть несколько входных данных, которые генерируются в моем контроллере. Кроме того, связанные javascripts генерируются в контроллере. На изображении ниже показаны входные данные.

Идея в том, что если я оставлю какой-либо из элементов управления, а элемент управления пуст, то под ним появится сообщение. Все элементы управления, кроме первого (который представляет собой вводимый текст), работают. Я не могу понять, почему первый не работает. Есть какие-нибудь предложения?

Ниже приведены html и javascript. Текстовый элемент управления:

 <input 
  onfocusout="ControlId1()" 
  id="ControlId1" 
  data-val="true" 
  name="ProcessFields[0].StringValue" 
  ejs-for="true" 
  class="e-control e-textbox e-lib e-input" 
  type="text"
  role="textbox"
  value=""
>
 

Выпадающий элемент управления:

 <select aria-hidden="true" tabindex="-1" class="e-ddl-hidden" name="ProcessFields[2].StringValue" id="ControlId32_hidden" data-val="true"><option selected="" value="">null</option></select>
<input onfocusout="ControlId32()" id="ControlId32" data-val="true" ejs-for="true" class="e-control e-dropdownlist e-lib e-input" role="textbox" type="text" readonly="" style="" aria-disabled="false" aria-label="undefined" tabindex="-1">
 

Часть Javascript для 2 элементов управления:

 function ControlId1() {
  var x = document.getElementById('ControlId1');
  console.log(x);
  if (x.value === '') {
    document.getElementById('ControlIdWarningId1').style.display = 'block';
  } else {
    document.getElementById('ControlIdWarningId1').style.display = 'none';
  }
}

function ControlId32() {
  var x = document.getElementById('ControlId32');
  console.log(x);
  if (x.value === '') {
    document.getElementById('ControlIdWarningId32').style.display = 'block';
  } else {
    document.getElementById('ControlIdWarningId32').style.display = 'none';
  }
}
 

Двумя элементами для отображения сообщения являются:

 <div class="bg-danger" style="display:none" id="ControlIdWarningId1">a</div>
<div class="bg-danger" style="display: block;" id="ControlIdWarningId32">6</div>
 

—-ОБНОВИТЬ—
Когда я открываю страницу, я получаю следующую информацию в консоли (не совсем понятно, что с ней делать). Кроме того, когда я покидаю элемент управления текстовым полем, выпадающий список и richtexteditor, я получаю еще 3 сообщения (также ниже).

При открытии страницы:

 Some messages have been moved to the Issues panel.
jquery.min.js:2 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
send @ jquery.min.js:2
ajax @ jquery.min.js:2
w._evalUrl @ jquery.min.js:2
Re @ jquery.min.js:2
append @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
z @ jquery.min.js:2
html @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
k @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
load (async)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
w.fn.load @ jquery.min.js:2
(anonymous) @ 1:16
e @ jquery.min.js:2
t @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
B @ jquery.min.js:2
VM439:6 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at <anonymous>:6:24
    at m (jquery.min.js:2)
    at Re (jquery.min.js:2)
    at w.fn.init.append (jquery.min.js:2)
    at w.fn.init.<anonymous> (jquery.min.js:2)
    at z (jquery.min.js:2)
    at w.fn.init.html (jquery.min.js:2)
    at Object.<anonymous> (jquery.min.js:2)
    at u (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
(anonymous) @ VM439:6
m @ jquery.min.js:2
Re @ jquery.min.js:2
append @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
z @ jquery.min.js:2
html @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
k @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
load (async)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
w.fn.load @ jquery.min.js:2
(anonymous) @ 1:16
e @ jquery.min.js:2
t @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
B @ jquery.min.js:2
 

Когда я покидаю текстовое поле:
1:73 Неперехваченная ошибка типа: ControlId1 не является функцией
в HTMLInputElement.onfocusout (1:73)
onfocusout @ 1:73

И в выпадающем списке (который на самом деле работает):

 <input onfocusout="ControlId32()" id="ControlId32" data-val="true" ejs-for="true" class="e-control e-dropdownlist e-lib e-input" role="textbox" type="text" readonly="" style="" aria-disabled="false" aria-label="undefined" tabindex="-1">
 

и редактор richtext (который тоже работает:

 1:111 Uncaught TypeError: ControlId3 is not a function
    at HTMLTextAreaElement.onfocusout (1:111)
    at Af (VM651 ej2.min.js:10)
    at t.blurHandler (VM651 ej2.min.js:10)
onfocusout @ 1:111
Af @ VM651 ej2.min.js:10
t.blurHandler @ VM651 ej2.min.js:10
1:260 <textarea onfocusout=​"ControlId3()​" id=​"ControlId3" data-val=​"true" name=​"ProcessFields[3]​.HTMLStringValue" ejs-for=​"true" class=​"e-rte-hidden">​</textarea>​
 

Наконец-то я нашел причину, но я все еще не понимаю. Я использовал инструмент, который показал Фил, скопировал всю страницу и медленно удалил все. Это работает, как только я удаляю тег. Почему это так? И почему только ввод текста не работает с тегом формы, в то время как остальные работают с тегом формы. И, наконец, как я могу заставить вводимый текст работать с тегом формы?

Я также попробовал это с помощью Фила, его кода и добавления формы, и там тоже не работает:

  <form method="post"><input 
  onfocusout="ControlId1()" 
  id="ControlId1" 
  data-val="true" 
  name="ProcessFields[0].StringValue" 
  ejs-for="true" 
  class="e-control e-textbox e-lib e-input" 
  type="text"
  role="textbox"
  value=""
> </form>
<div class="bg-danger" style="display:none" id="ControlIdWarningId1">a</div>
 

Таким образом, есть какие-либо предложения, как заставить входной тег с onfocusout работать внутри тега?