javascript - 如果 `name` 属性无效，如何识别表单？

Question

我有以下 HTML 代码行来识别用于 JScript 目的的表单:

<form action="/form-to-email.php" method="post" name="helprequest" onsubmit="return validateHelpForm()">

但是，当我去验证网页时(通过 W3C for XHTML Strict)，我收到以下错误消息:

there is no attribute "name"

如果我有下面的 JScript 代码，我如何识别我的表单。我应该忽略 W3C 验证吗？ (这是唯一不能使它在 W3C 中有效并且在其他情况下有效的东西)

// Text Field Validation
x1 = document.forms["helprequest"]["Name"];
x2 = document.forms["helprequest"]["Mailing_Address"];
x3 = document.forms["helprequest"]["Address_line2"];
x4 = document.forms["helprequest"]["City"];
x5 = document.forms["helprequest"]["State"];
x6 = document.forms["helprequest"]["ZipCode"];
x7 = document.forms["helprequest"]["Country"];
x8 = document.forms["helprequest"]["FromAddress"];
x9 = document.forms["helprequest"]["ProblemDescription"];
x12 = document.forms["helprequest"]["PhoneNumber"];

Answer 1

使用 id 属性。只需确保它们的值在页面上保持唯一即可。

如果您希望标识一组元素，请使用 class 属性。

这两个属性都是通用的(= 可以用在每个元素上)。

不过 Javascript 需要调整:

function getElementByXpath(path) {
    return document.evaluate(
                 path
               , document
               , null
               , XPathResult.FIRST_ORDERED_NODE_TYPE
               , null
           ).singleNodeValue;
}

x1 = getElementByXpath("/html/body//form[@id='helprequest']//*[@name='Name']");
// ... etc.

此方法只能应用于 xml 文档(我认为这对您的情况不是问题，因为您用 xhtml 标记了问题；更多详细信息 here)。

或者你可以这样做:

var e_form   = document.getElementById("helprequest");
var a_inputs = e_form.getElementsByTagName("input");

for (var i=0; i <= a_inputs.length; i++) {
    switch ( a_inputs[i].getAttribute("name") ) {
        case "Name": x1 = a_inputs[i]; break;
        case "City": x4 = a_inputs[i]; break;
        // ...
        default:
    }
}

最后，如果你决定使用jquery这样的框架，你也可以这样写代码:

x1 = $("#helprequest input[name='Name']")[0]; // element; without '[0]': jquery object

或者直接收集值:

var v1 = $("#helprequest input[name='Name']").val();