I have an input field that I want to be required, so I wanted to simply use the "required" attribute:
<input id="foo" name="foo" required>
In the same form I have a contenteditable, and I've built styling buttons to let the user change the font family, size, bold, italics, underline, and color:
<button data-richbutton="Bold">B</button>
But, of course, when the user clicks on any of those buttons while that required field is empty, they're given a warning and can't change the style until they've entered something in the required field.
I know that I can change all of those buttons to a DIV and not have this problem, but the "proper" element is BUTTON.
Is there a way to NOT trigger the required attribute with specific buttons?