jquery - Ajax 提交 - 选择并聚焦字段并出现验证错误

Question

我正在尝试根据验证决策来实现选择(并聚焦)组件。

例如:

• 登录表单(2 个输入:用户名、密码；1 个提交按钮)
• 如果 username 上的验证失败, <h:inputText id="name">将重点关注
• 如果 password 上的验证失败, <h:inputSecret id="password">将重点关注
• 页面不会刷新，提交是一个ajax按钮

我尝试过的:

没有 ajax 调用(这是工作正常 - componentId 在验证过程中的 bean 中设置，并在每次调用后选择/聚焦页面刷新/提交):

$(document).ready(function() {
  document.getElementById('form:#{bean.componentId}').focus();
  document.getElementById('form:#{bean.componentId}').select();
});
...
<h:commandButton id="save" action="#{bean.save}" type="submit"/>

但是使用 ajax 调用:

function myFunc(data) {
  if (data.status == "success") {
    var element = document.getElementById('form:#{bean.componentId}');
    element.focus();
    element.select();
}}
...
<h:commandButton id="save" action="#{bean.save}" type="submit">
  <f:ajax execute="@form" render="@form" onevent="myFunc"/>
</h:commandButton>

这种方式也有效，问题是，componentId仍然是相同的(在 bean 创建期间初始化的那个)。

与此主题相关的先前问题:

• Proccess onclick function after ajax call
• Each submit button calls the same function

如何使用ajax提交按钮并选择/聚焦到验证错误的字段？？？

Answer 1

非 ajax 提交基本上重新渲染整个页面，包括脚本。 ajax 提交仅重新渲染页面的一部分，在您的特定情况下，仅重新渲染表单本身(由 <f:ajax render> 属性控制)。这些脚本显然没有放置在表单中，因此它们保留“旧”值(您知道，EL #{} 在网络服务器中运行，但不在网络浏览器中运行，因此目前网络浏览器检索 HTML/JS 代码， EL已经运行很长时间了，调用JS代码时不会重新执行)。

您还需要将带有这些 EL 表达式的脚本 block 放在相同的表单中，以便它也会在 ajax 提交时更新。