jquery validator - name attribute and nested tags

Question

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 questionText even, if there is no name attribute
is the name attribute used internally by jquery validator to decide which elements should be validated?
why, when I have more then one row with questionAnswer inputs, 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>

Rory McCrossan · Accepted Answer · 2012-08-28 13:44:45Z

1

1.how is it, that jquery validator validated questionText even, if there is no name attribute

Because the element has the class required on it, which jQuery validate picks up.

2.is the name attribute used internally by jquery validator to decide which elements should be validated?

Yes it is.

3.why, when I have more then one row with questionAnswer inputs, there is an error message near first row, no matter which row I left empty?

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.

answered Aug 28, 2012 at 13:44

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andna Over a year ago

About first one, I had the class set up on questionAnswer fields also, but they weren't validated (as I said). About the second one, thiss behaviour with error message in first row happens when I have unique names assigned to elements.

Rory McCrossan Over a year ago

Can you please post the HTML as it looks when it's rendered, not in template format.

Andna Over a year ago

It seems that when I make sure that ids of the questionAnswer inputs are all unique, the error messages appear in proper places, but it is a bit inconsistent. Firstly I needed names and now I need id's

Collectives™ on Stack Overflow

jquery validator - name attribute and nested tags

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related