Forum Moderators: open

Message Too Old, No Replies

Making a required input NOT react to specific buttons

         

csdude55

9:11 pm on Aug 1, 2022 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



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?

coothead

9:42 pm on Aug 1, 2022 (gmt 0)

5+ Year Member Top Contributors Of The Month



Hi there csdude55,

set type="button", thus...


<button data-richbutton="Bold" type="button">B</button>


Of course, feel free to ignore my reply as you did with this other one mine here...

Removing a container with a nested hidden element [webmasterworld.com]

coothead

csdude55

12:07 am on Aug 2, 2022 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I didn't mean to make you feel ignored, @coothead, I'm sorry about that. My dad had COVID, which led to stage 4 pulmonary fibrosis, and now he's in Hospice. So I'm constantly being pulled in several directions, and can't always find time or remember to reply. Even when good friends message me :-/

Using type="button" did work on this, thanks for that!