#15330 new bug ()

Opened March 11, 2019 04:10PM UTC

Last modified March 11, 2019 06:20PM UTC

checkbox/radio UI styling incompatibility with HTML5 "required" attribute

Reported by: PV9685 Owned by:
Priority: minor Milestone: none
Component: ui.core Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:
Description

When using HTML5 form field validation it is common to think to simply "highlight invalid input fields when the user clicks submit by making them required". For other fields, adding the Required attribute and a bit of css such as below will highlight the invalid fields. Unfortunately, due to the design of these in JQueryUI checkbox/radio items do not display any affect.

textarea:invalid, select:invalid, input[type=text]:invalid, input[type=radio]:invalid, input[type=checkbox]:invalid {
  border: 2px dashed red;
  box-shadow: 0 4px 6px 0 red, 0 6px 18px 0 #D4D400;
}
Attachments (0)
Change History (1)

Changed March 11, 2019 06:20PM UTC by rjollos comment:1

description: When using HTML5 form field validation it is common to think to simply "highlight invalid input fields when the user clicks submit by making them required". For other fields, adding the Required attribute and a bit of css such as below will highlight the invalid fields. Unfortunately, due to the design of these in JQueryUI checkbox/radio items do not display any affect. \ \ \ textarea:invalid, select:invalid, input[type=text]:invalid, input[type=radio]:invalid, input[type=checkbox]:invalid { \ border: 2px dashed red; \ box-shadow: 0 4px 6px 0 red, 0 6px 18px 0 #D4D400; \ } → When using HTML5 form field validation it is common to think to simply "highlight invalid input fields when the user clicks submit by making them required". For other fields, adding the Required attribute and a bit of css such as below will highlight the invalid fields. Unfortunately, due to the design of these in JQueryUI checkbox/radio items do not display any affect. \ \ {{{#!css \ textarea:invalid, select:invalid, input[type=text]:invalid, input[type=radio]:invalid, input[type=checkbox]:invalid { \ border: 2px dashed red; \ box-shadow: 0 4px 6px 0 red, 0 6px 18px 0 #D4D400; \ } \ }}}