HTML5 Browser Validation - 1 form, 2 buttons, need to change validation

Question

I have a form with two buttons - one is a "submit" button at the end of the form, and in the middle of the form I have an "Add" button that uses Javascript to add hidden input elements within the form whenever it's clicked.

Here are the two input fields/add button:

<input name="name" required>
<input name="email" required type="email">
<button type="submit">Add</button>

And then another set of input fields:

<input name="title" required>
<button type="submit">Submit</button>

And these are all within one form.

I want HTML5 browser validation to fire on the "name" and "email" fields when I click "Add" (but not the "title" field) and the browser validation to fire on the "title" field (but not the "name" and "input" fields) when I click "Submit." Is there any way to accomplish this?

Answer 1

You can add or remove attribute "required" to the fields to which you required by

                $('#field_id').attr('required','true');
                $('#field_id').removeAttr('required');

Answer 2

The only way I see is to set the required attributes (or: properties) dynamically on-click.

Or you can add and remove event listeners for invalid , which seem to suppress the native "missing"/"wrong format" notice - even if they do nothing (like preventDefaultAction or so).

I also tried buttons with the formnovalidate attribute and manually checkValidity() on the elected elements, but even though that fires "invalid"-events no native dialogue is shown and the submit is not cancelled. (tested everything with opera)

Answer 3

Is there any particular reason that you want to use HTML5 to validate your form in the first place? I feel like what you need would be easily accomplished using Javascript, and you noted that your add button would be using javascript anyway. Also, why would your form validation to be partitioned in such an odd way?

I don't even like the HTML5 validation in the first place. For example, if you type in "asdf@1" into an HTML5 email input, it will accept it. Now, you can make the argument that that's technically a valid email address, but I think in practice most people would agree that they wouldn't accept that as a valid email address. You could use an IP address in place of the domain but I highly doubt that you could use that as an email to log into any modern web page.

But I digress. To answer your question, you could write a quick function with JQuery that would override the form validation based on which button was clicked. You would do this by catching the "invalid" error thrown by the HTML5 validation for that particular input and returning false to get around it. Therefore, when you clicked submit you could override the name and email form validation, and vice versa for when you click the add button. Again, I have no idea why you would want to do this but it is a solution.