How to Identify a Form if `name` Attribute is invalid?

Question

I have the following line of HTML code to identify a form for JScript purposes:

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

However when I go to validate the web page (via W3C for XHTML Strict), I get the following error message:

there is no attribute "name"

If I have the below JScript code, how can I identify my form. Should I ignore the W3C validation? (This is the only thing not making it W3C valid and works otherwise)

// 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"];

score 2 · Accepted Answer · edited May 23 '17 at 11:43

Use an id attribute. Just make sure that their value remains unique on a page.

If you wish to identify a set of elements, use the class attribute.

Both attributes are universal (= may be used on every element).

The Javascript needs an adjustment, though:

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.

This method can be applied to xml documents only ( I assume that is not a problem in your case, since you tagged the question with xhtml; more details here ).

Alternatively you go about like this:

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:
    }
}

Finally, if you decide to use a framework like jquery, you may also write code like this:

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

or collect the values directly:

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

But would I have to change to the JavaScript code as well? – Paul Williams May 06 '15 at 15:35 — Paul Williams, May 06 '15 at 15:35

score 1 · Answer 2 · answered May 06 '15 at 15:36

1

You can use jQuery for this:

xObject = $('form[name=helprequest] input[name=Name]');
x1 = (x1Object.lengt) ? x1Object.val() : '';

xObject = $('form[name=helprequest] input[name=Mailing_Address]');
x2 = (xObject.lengt) ? xObject.val() : '';

answered May 06 '15 at 15:36

Federico Sosa

94
3

1

Rather not use JQuery for this one. – Paul Williams May 06 '15 at 15:36

How to Identify a Form if `name` Attribute is invalid?

2 Answers2