I have this form in my page:
<form:form id="addUnitForm" method="POST" modelAttribute="questionUnit">
<fieldset>
<label for="questionText">Question</label> <input type="text"
id="questionText" class="required" value="${questionContent[0] }" /><br/>
Answers
<c:forEach var="i" begin="1" end="${questionContentSize-1 < 0 ? 0 : questionContentSize-1 }">
<div id="answerRow">
<input type="text" id="questionAnswer" name="questionAnswer${i }" class="required" value="${questionContent[i] }"/>
<input type="checkbox" id="questionAnswerCheckbox" ${answerContent.contains(questionContent[i]) ? 'checked="checked"' : ''}/>
<input type="button" id="removeAnswer" value="x" />
</div>
</c:forEach>
</fieldset>
<input type="submit" value="OK" />
<input type="button" value="Add answer" id="Add_answer" />
</form:form>
now, when I had the same form, but without name attributes (only id’s) and every input element had the same value of id attribute and no name attribute, when I submited form only the field with questionText id got validated, the rest of them were not validated.
Now, I added unique names to every input with id of questionAnswer in my form, and everything works, so here are my 3 questions:
- how is it, that jquery validator validated
questionTexteven, if there is nonameattribute - is the
nameattribute used internally by jquery validator to decide which elements should be validated? - why, when I have more then one row with
questionAnswerinputs, there is an error message near first row, no matter which row I left empty?
EDIT: here it is the form code from browser
<fieldset>
<label for="questionText">Question</label> <input type="text" value="" class="required valid" id="questionText"><br>
Answers
<div id="answerRow">
<input type="text" class="required valid" id="questionAnswer" name="questionAnswer0">
<input type="checkbox" id="questionAnswerCheckbox">
<input type="button" value="x" id="removeAnswer" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">
</div>
<div id="answerRow">
<input type="text" class="required valid" id="questionAnswer" name="questionAnswer1">
<input type="checkbox" id="questionAnswerCheckbox">
<input type="button" value="x" id="removeAnswer" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false">
</div>
</fieldset>
Because the element has the class
requiredon it, which jQuery validate picks up.Yes it is.
Because jQuery validate cannot natively handle multiple elements with the same name (although there may be a plugin validator to handle this though) so it always assumes the error came from the first element in the document with the specified name, so puts the error there.