How to get browsers to selectively ignore HTML5 required attribute on forms

Question

I've got a standard HTML form, which is split into two sections using fieldset elements. One section is to enter name, email address etc and the second section is to enter the postcode for an address auto-complete feature (the postcode lookup field in the second section does not have a required attribute).

Each section has its own submit button. Each of the fields in the first section has a form field with a HTML5 required attribute.

My question is, when a user enters their postcode into the postcode lookup field without entering anything in the first section, all fields in the form are submitted in browsers which don't support this attribute (e.g. Firefox 3.6). In Firefox 4 (for instance), it honours the required attribute and prevents submission of the form if there are empty fields with a required attribute. However, this breaks my implementation of the error-checking and validation of the form (server-side, in PHP).

So, is there a way of being able to tell the browser to (in this case) ignore the "required" attributes of the first section when the submit button of the second section is pressed?

I understand this may be going against the point of the required attribute, but I've built the form so it doesn't have to be completed in a certain order, i.e. A user may choose to complete the postcode lookup field before entering their personal details, but the required attribute is currently forcing the user to complete the form in a certain way, when it isn't necessary to do that.

Also, any solution must be able to work without JavaScript. Please don't mention any answers advocating replacing the postcode lookup section with Ajax, it has been decided for me that this is not an allowed option.

Answer 1

I think I see your problem. I don’t believe there’s anything in HTML that lets you specify this more complicated validation rule. I think you’ll have to either:

1. Split these fieldsets out into two separate forms on the page;

2. Use two separate forms on two different pages; or

3. Re-write your server-side code so that the non-postcode form fields only include the required attribute when the user has submitted a postcode.

Answer 2

Is there any nested form in your page?. first form tag not work in nested forms like below. in that case use empty form tag to avoid error. and also do not write class with form tag starting like form.filed{}

<form>
main form
<form> </form>
<form> form1 </form>
<form> form2 </form>

</form>