Custom validation messages not working in in-person eligibility form

[angela-tran]

The mockups show that the in-person eligibility form should show custom validation messages - "Please choose an eligibility type." for the radio buttons and "Please confirm you have used an agency policy to verify eligibility." for the checkbox.

The current implementation in #2317 is using our generic form.html template to render the forms, which has logic to handle custom validation messages, so it should just work, but it is not. Let's debug it.

[angela-tran]

I found out that the problem is in this line:

benefits/benefits/core/templates/core/includes/form.html

Line 73 in 99500c8

$("button[type=submit]", "#{{ form.id }}").on("click", function(e) {

Here we're passing in a selector of button[type=submit] and a context of #{{ form.id }} to find the submit button that should trigger validation logic. But in in_person/eligibility.html, the submit button is not inside the <form> element; instead it's outside the <form> element and has a form attribute, which is also a valid approach.

I think we could fix this by adding a query for a button[type=submit] with a form attribute of #{{ form.id }} if the existing query doesn't find anything.

[thekaveman]

I think we could fix this by adding a query for a button[type=submit] with a form attribute of #{{ form.id }}

Take a look at the .add() jQuery helper.