是否有可验证的方式来使用 HTML 标签和输入元素并且输入没有 id？

Question

我将Jquery Mobile 用于一个应用程序，该应用程序在每个页面上都有一个登录弹出窗口。问题是，Jquery Mobile 在 DOM 中总是至少有 2 个页面，所以我在 DOM 中会有两个弹出窗口和登录表单，迫使我想办法避开duplicate id-attributes。

我通过省略登录表单输入中的id 属性来解决这个问题，所以我这样做：

 <label for="email" class="inFieldLabel">#tx_email#</label>
 <input autocomplete="off" type="email" name="email" value="#XMLFormat( lostPass.email )#" class="required">

这在视觉上效果很好，但会产生验证错误，因为：

 The for attribute of the label element must refer to a form control.

问题：
有没有办法在不使用id 属性的情况下通过验证？什么是解决方法？

注意：我不能使用全局登录弹出窗口，因为 Jquery Mobile 目前不支持，所以我被困在每个页面上的弹出窗口。

感谢您的见解！

Answer 1

将标签应用到的表单控件放在标签内。

<label> text <input> </label>

Answer 2

假设两件事：您不会使用 ID 来设置表单样式，并且每个弹出窗口周围都有一个 FORM 标签。此代码将在表单元素的 ID/FOR 中附加一个随机数。您可能还需要将此编号传递给您的验证例程。

jQuery("FORM").each(function()
{
  var randomNum = Math.random()*1000;
  var jForm = jQuery(this);
  jForm.find("INPUT").each(function()
  {
    this.id+=randomNum;        
  });
  jForm.find("LABEL").each(function()
  {
    jQuery(this).attr("for",jQuery(this).attr("for")+randomNum);
  });
});

...

validateForm(form, randomNum);

这是使表单上的 ID 保持唯一性的一种方法。

我想我假设您也在使用 Validate 插件。如果有任何帮助，您可以为您的表单/元素使用多个非唯一 ID，只要您通过验证唯一选择器，例如“#page-1 #popup-form #myInput”或“#page -2 #popup-form #myInput"。

更多修改：

等等，你在找这个吗？您可以使用表单对象通过名称而不是 id 来引用表单及其控件。

<form name="formNameAttribute">
  <input name="inputNameAttribute" value="some value" />
</form>

<script>
var inputValue=document.forms["formNameAttribute"]["inputNameAttribute"].value;
</script>