If you are using the
semantic-ui-less
package with versions of LESS before 3.5 somecalc
values will not be computed correctly due to changes in variable interpolation. It is recommended that you upgrade to at least 3.5 to continue using new versions of SUI. For more information see #6512
- Form Validation - Form can now return their validation prompt dynamically based on their current value. Thanks @xDaizu #6016 #3864
- Form Validation - Fixes bug where
on: 'change'
would still show validation prompts onblur
when usinginline: true
#4423 Thanks @avalanche1
- Form - Fixes issue where radio checkbox would not return correct value from
get values
Thanks @tincdev #5713 #6043 - Form Validation - Fixed issue where default prompts for
contain
anddoesntContain
rules were swapped. Thanks @xiongyu-git #5530
- Form Validation - Fixed issue where radio was not being included in
onFailure
values if not set #5064 - Form Validation - Added
add rule
add field
,remove rule
,remove field
to programmatically and and remove validation rules from form validation #4267 #5253 - Form - Updated docs to include new examples of adding/removing validation rules
- Form Validation - Added undocumented
add prompt
to list of behaviors
-Form - Credit card validation now no longer fails validation with dashed credit card values #5122 Thanks @neokio
If you are using form validation, previous to 2.2.8
calling is valid
would trigger UI updates. This behavior now no longer triggers UI updates, and will only return a boolean
whether form is valid.
To trigger UI updates you can call validate form
. Additional form behaviors have been added as well. See the new documentation on programmatic validation for more examples.
- Form Validation - Rules now properly supports identifiers with special characters like brackets, e.g.
name="user[name]"
Thanks @mzygmunt #4163 - Search -
esc
key now hides results and prevents them from being displayed again until form field is blurred - Form Validation - Fixes issue where decimal validation would allow multiple
.
in value - Form Validation - Fixes js error caused by revalidating inputs without validation rules #4497 #4547 Thanks @cbxp
- Form Validation - Fixed issue where using bracketed values, or other special characters could cause errors with selectors #4163 #4164
- Sticky - Adds
container
setting. This can be used to specify the offsetParent of the sticky element and avoid having to calculate on initialization (improving performance)
- Form Validation - Bracketed notation can now be omitted for rules, instead passing in bracketed values with the
value
parameter #3313 - Form/Segment - Fix typo causing
pointer-events: none
no to work onloading segment
andloading form
Thanks @YamiOdymel and @ilanus #4403 - Form - Fixed issue where
disabled fields
with radio inputs would not correctly dim the label Thanks @louwers #4366 - Form -
input
styles now apply totype="file"
thanks @coldfire79 #4074
- Shape - Fixed issue where shape was animating incorrectly when using jQuery 3.0, due to secret changes in how
width
are calculated on elements withtransform
- Dropdown - Added new setting for search selection
hideAdditions
this will remove showing user additions inside the menu, making for a more intuitive adding process. Dropdowns now have a new stateempty
which will format an active dropdown with empty results. #3791 - Form Validation - Added
depends
validation rule setting which will only validate a field if another specified field is not empty - Form Validation / Dropdown - Using "enter" key in a
search dropdown
could cause a form to be submitted #3676 - Form Validation - Fix issue with some foreign email addresses with extended charsets causing email validation to fail #3955 #3755
- Form Validation - Revalidating a field
on: blur
could cause fields not yet interacted with to be validated #3606 - Form - Fixed issue with
(x) fields
andequal width
fields where middle rows would be slightly smaller because they include both left and right padding in % width. (Edges only have one side padding). Field groups now use negative margins instead. - Form Validation - Fixed issue where initializing form multiple times would not properly call
destroy
removing previous settings #3798 - Form - Fix
equal width fields
sometimes not including right field spacing on mobile #3913 - Form - Fixed issue where
inline
field was not being correctly inverted in color withinverted form
#4004 #4005 Thanks @tbracken - Form - Grouped
fields
andfield
would cause different margin collapse, makingfields
include larger gaps between content #3717 - Form - Remove deprecated
size()
method inprompt
#3655 Thanks @SimonArdrey - Message - Fixes
compact message
appearing asblock
when inside aform
#3343 Thanks @bcroq - Form - Added example of using custom rules with form
- Form - Fixed issue where text would turn transparent inside a
loading form
#3122 - Sidebar - Sidebar no longer includes
transform
rules on child elements, this was causing layout issues in some cases (for example dropdowns in sidebars) #3306
- Form - Adds
equal width form
andequal width fields
for simpler grouped fields - Form Validation - Fixes error on
blur
orchange
when using a blank validation object #3131 Thanks @listepo - Form Validation - Fixes some issues with form integer validation #3053 Thanks @maturano
- Form Validation -
decimal
rule now only matches decimals, to match any number usenumber
rule. #3060 - Form - Removed
divider
spacing as part ofui form
, this caused inheritance issues when using special divider types #3092
- Form Validation - Form validation now supports a brand new shorthand which is drastically simpler to specify #2579
$('.ui.form') .form({
- Form Validation -
identifier
andprompt
are now optional for all form validation rules. Default prompt values have been added for all rule types, and identifier will now automatically match on the named value for rule if no ID is specified. #3001 #2579 - Form Validation - All form prompts now support templates values,
{value}
,{name}
,{ruleValue}
, and{identifier}
#3001 - Form Validation - Validation messages in
error message
group are now correctly removed when invalid field revalidates on blur
- Input - Fixes regression where
ui icon input
inside forms were not correct width #2953
- Form Validation - Fixes callbacks on
onSuccess
so as to not break backwards compatibility. #2945 #2944
- API Added new setting
hideError
, defaults toauto
(will automatically hide error for elements that are not forms). #2586 - Form Validation - Added credit card validation, supports array of card types, and international cards including non luhn cards like China UnionPay #2729
- Form Validation - Updated appearance of form validation prompts to use a more lightweight style. Added variables for controlling error validation prompt styles in
form.variables
- Site - Added global variable
@focusedFormBorderColor
for controlling form focus border color - Form -
inverted form
now remove input border, added new variables for controlling inverted form input styles - Form Validation - Added
number
anddecimal
validations to form Thanks @TonnyORG #2537 - Form Validation - Form
onSuccess
andonFailure
now receive current form fields as a parameter Thanks @guodong
- Form / Input - Fixes
::placeholder
text color forui error input
, modifies form error placeholder color to distinguish from form value error color #2786 - Form / Input - Fixes issue where
ui input
would sometimes collapse to0px
width, especially when used inside aninline field
[#2705 [#2621 #2821 - Form -
disabled field(s)
now removepointer-events
allowing it to disable checkbox and dropdown functionality #555 - Form - Date input and other special input in chrome now are the same height as normal input (adds custom vendor shadow dom styling) #2704
- Form - Form will no longer show messages that are empty in
error
,warning
, orsuccess
state. - API - API now will use automatically use
form
action if no api event is specified now when form isstateContext
but not initialized element - Build Tools - Fixes issue on
win
platform where packaged theme would not correctly update when using watch due to regExp not matching windows path separators. - Form Validation - Fixed issue with
get value(s)
where unchecked checkboxes would not correctly retrieve values - Form - Dropdown in
inline field
now use auto width instead of 100%
- Form Validation - In
2.0.4
length
rules were corrected to match "exact length" and not "minimum length". This may have caused issues for those who were using this rule as min length previously. We've remedied any breaking changes introduced by by returninglength
to functioning as "minimum length" and added a new ruleexactLength
for matching exact length. #2681
- Form - Added
doesntContain
anddoesntContainExactly
#2638 - Form - Fixed issue with
minLength[1]
validation not behaving same asminLength > 2
#2636. - Form - Fixes errors when a field identifier is named
identifier
#2629 - Form - Form fields will now error when a non-string identifier is used
- Formatting - Fixed several source files that had
CR LF
(Windows) line endings #2649 - Input - Fixed
left action input
displaying with incorrectinput
border radius insideui form
#2638 - Added individual examples of all form validation rules
- Form - URL regexp will now match now works correctly, and matches against non
http://
prefixed urls likewww.google.com
- Form -
reset
will no longer clear values if no default value is found #2504 - Form - Clarified usage for
reset
in form docs #2504
- Form Validation - Form validation now passes settings through a
fields
object. This is to make form initialization match other components. The previous syntax will continue to work but will produce deprecation notices in console - Form -
grouped inline field
no longer display horizontally. Useinline field
instead for horizontal inline field groups. - Tab -
onTabInit
andonTabLoad
have been renamed toonFirstLoad
andonLoad
respectively. This is to conform to the naming conventions of other modules (no self reference). Previous callbacks will continue to work but will produce deprecation notices in console. Two new callbacksonVisible
andonRequest
have been added as well. - Form - Forms now use
flexbox
for creating field groups. Inline fields now support(x) wide
sizing usingflex
- Popup - Popup has been rewritten to drastically improve performance, especially when testing multiple positions.
- Transition - Fallback javascript animations have been removed from UI components like dropdown and popup to increase performance. This removes need for expensive pseudo selectors like
:visible
,:animated
and:hidden
and reduces filesize. - Form Validation - Form validation now uses a single
settings
object like other modules. Using(fields, settings)
will continue to work but will produce a deprecation notifications inconsole
- Form Validation - Form validation now supports many new validation rules, including some specifically for use with multiple select values.
- Transition - Transition code has been optimized to increase performance. 100% improvement on first animation, and 40% improvement on subsequent animations.
- Visibility - Visibility and sticky now use a more performant pub/sub pattern that will only attach a single event to context
scroll
. - Form - Added a host of new styles for form fields autocompleted by your browser, including autocompleted error, and focus states
- Form - Added placeholder color rules for IE,
ms-input-placeholder
- Form - Fix
errored field
dropdown keyboard selection color - Form - Adds form
success
state - Form Validation - Added
is valid
behavior, returnstrue/false
if form is valid - Form Validation - Added
different[field]
rule which requires a field to be different than another field - Form Validation -
data-validate
now takes precedence over other validation matching schemes likename
orid
- Form Validation - New rules for matching against custom regular expressions
- Form Validation - Form validation now has
minCount
,maxCount
, andexactCount
for validating multiple selections - Popup - Popup now defines a
transform-origin
so animations will be affected by the direction the element is placed - Sidebar - Improved animation performance through performance debugging. Sidebar now caches, width, height, rtl direction on load.
- Visibility/Sticky - Visibility now uses pub/sub pattern to greatly improve scroll performance when attaching multiple events
- All Modules - Performance logging now delays 500ms instead of 100ms for console logging to ensure all logs are captured in one group
- All Modules/Transition - Transitions no longer use
rotateZ(0deg)
to trigger GPU display of visible state. This causes issues withtransform
creating new stacking context that can disruptz-index
. - Dropdown - Fixed
search dropdown
submitting parent form when enter shortcut pressed - Form - Form will no longer set a height for
textarea
using therows
property - Form -
inline fields
are now1em
and do not match label's reduced size - Form -
field
insidefields
no longer produce double sized margins. - Form - Form sizes and input sizes now inherit from
site.variables
- Form Validation - Fixed bug causing
match
rule not to work as expected. - Form Validation - Fixed
clear
andreset
causing validation error to appear on checkbox if empty rule was set on checkbox. - Form Validation - Form validation now validates correctly on
<select>
change - Form - Fixed autocompleted
ui selection dropdown
having dropdown icon z-index issues - Form/Input -
ui labeled input
insideform
will no longer escape column width.ui fluid input
will now use input widths shorter than browser default. - Form -
set value
no longer automatically callsvalidate form
- Sidebar - Sidebar
legacy
animations have been removed. 3D transforms are now available in all supported browsers.
- Sticky - Adds sticky module from
2.x
branch. Sticky elements now use pub/sub with drastically improved performance. Sticky elements that do not fit on page will now scroll at the same speed as the page is scrolled instead of slower.
- Form - Fix
grouped required
fields display issues Thanks @palmsey
- Dropdown - Dropdown
focus
color has been adjusted to match forms more closely
- Form -
<select>
now receive error formatting onform error
Thanks @davialexandre - **Item ** -
img
inside ofui item content
now do not receive size formatting by default - Form - Added
input[type="search"]
styles toui form
- API - Remove console error message when no API url is specified but element is a
form
(defaults toform
action) - API -
api
check for serialize object optional dependency no longer produces error whenserializeForm: true
and dependency is not found.
- Form Validation - Adds
containsExactly
,notExactly
,isExactly
case sensitive validation rules, makecontains
,not
,is
case insensitive. - Form Validation -
contains
rule is now case insensitive - Form Validation - Validation messages no longer increase field height on
inline fields
like checkboxes after error appears
- Form - Input rules now apply to
input[type="time"]
- Form Validation -
get values
,set values
now support multiple select e.g.field[]
- Form Validation - Dropdown and checkbox will now validate after interaction with
on: 'blur'
- Form -
info message
are no longer hidden by default insideui form
- Form - Lightened error dropdown hover text color to be more legible
- Form - Form now has new methods
reset
,clear
,set value(s)
, andread value(s)
for modifying and reading form data. Check docs for details on implementation. Thanks @mktm - Form - Form will now prevent browsers from resubmitting form repeatedly when keydown is pressed on input field.
- Button - Fixes formatting for
disabled button
insideui buttons
- Site - Form input highlighting color added (helps differentiate form colors with autocompleted fields). Default text highlighting color moved from highlighter yellow to a mellow blue.
- Popup - Popup now uses
preserve: false
by default, this is slightly less performant but will reduce page clutter caused by leaving generated elements in the DOM - Sidebar -
setup layout
not occurs synchronously if you initialize a sidebar without the proper html. This makes sure calls to sidebar will occur correctly before the page is setup. A new settingdelaySetup
will override this, increasing performance. - Modules - Use of
$.proxy
swapped to nativefunction.call()
for performance gains across all modules
- Form -
ui search dropdown
inside a form has incorrect focus style
- Progress - Progress bars now display all intermediary percentage values when animating. Improved performance when progress bar is rapidly updated.
- Form - Fixed (x) wide field not having correct bottom field margin when in
fields
group on tablet or mobile - Form -
ui input
now receives the same formatting as a normal input inside aninline field
- Input - Fixed bug when
ui action input
uses aui icon button
, button was receivingi.icon
formatting. - List - Fixed bug when using
ui icon button
orui icon header
causing element to receive icon formatting
- Form - Form inputs without
type
specified are now formatted Thanks PSyton - Menu - Fix formatting of
ui selection dropdown
insidemenu
- Form - Form will no longer process validation rules on disabled fields
- Table - Table now has a
structured table
type, which removes some formatting considerations to support complex table layouts withcolspan
androwspan
- Form - Fixed positioning of horizontal field groups, aka
fields
for mobile.
- Form - Form validation now has parameter
optional
which will only validate a field against a set of rules if the user does not leave it blank Thanks DHNCarlos - Checkbox - JS Checkbox now handles several variations of html. Labels can be before inputs, after, or not included at all. This should work better with server side form generation.
- Item/Card - Default link formatting inside element simplified to avoid adjusting other nested
ui
link styles - Form - Fixes required checkbox asterisks formatting incorrect
- Fixed documentation on dropdown actions, form field widths, form validation types, and many odds & ends
- Transition - Transition's caching of final display state and animation existence now has improved performance.
- Icon -
remove icon
is now formatted correctly when used asremove link icon
- Form - Date field has been removed, use a
ui icon input
with acalendar icon
instead - General - CSS animations now hint with will change properties to increase performance in supported browsers
- Button - Now has compact form, used for fitting into tight spaces
- Form - Form now has a success state which will automatically display success messages
- Form - Grouped fields and inline fields can now have labels
- Form - Forms in 'success' state will now show success messages inside
- Form - Inputs now use 1em font size and correctly match selection dropdown height
- Form - Inverted form now properly styles loader
- Form - New field type
required
formats labels to show filling out field is mandatory - Label - Now has compact form, for fitting into tight spaces
- List - Child lists can now be formatted to sit inside text content
- Form, Input - Fixes
ui input
to work correctly insideinline field
- Form - Fields can now be aligned to a grid Thanks seralex-vi
- Checkbox - Fixes issue where checkboxes with multiple line labels were appearing formatted incorrectly.
- Fixes a variety of issues with malformed examples (thanks community)
- Menu - Fixes formatting of attached segments with menus
- Form - Forms, Dropdowns, and Inputs now have matching padding size, and use 1em font size to appear same size as surrounding text
- Form Validation - Form validation now automatically revalidates a selection dropdown on change when invalid
- Form - Form fields with errors will now properly style dropdown elements Thanks Musatov
- Checkbox - Fixes checkbox appearance inside inverted forms
- Input - Fixes ui input to inherit form sizing
- Form Validation - Fixes form validation regular expression matching Thanks icefox0801
- Form - Grouped form fields now have responsive styles for mobile
- Form Validation - Form validation now rechecks on all form change events, not just input change
- Menu - Fixes dropdown formatting when used *inside a menu item
- Menu - Fixes formatting of grouped icon buttons inside menus
- Form - Fixes issue with onSuccess not allowing cancellation of form submit in form validation
- Form Validation - Adding custom validation is now simpler, uses syntax
$('.form').form('add prompt', identifier, 'Error message');
- Message - Prevents close icon from being misformatted in icon message thanks MohammadYounes
Some updates to docs formatting
- Icon - Fixes unnecessary formatting on thumbs up/down
- Form - Fixes all validation input to be trimmed for whitespace
-Transition: Transition has been completely rewritten, performance should be about 10x after first animation due to caching and use of request animation frame
- Grid - Adds
doubling
responsive variation which automatically formats content spacing based on device type - Form Validation - Adds two new parameters, to allow for changing of revalidation and delay on input
- Dropdown - Value can be retrieved even in instances where forms arent used
- Form - Adds input type="url" to forms
- Accordion - Adds formatting for nested accordions
- Form - Darkens placeholder text color to be more visible
- Form - Fixes issues with form validation not escaping regex characters
- Form - Errored fields now have their icons and corner labels colored appropriately
- Labels - Fixes formatting of links inside labels
- List - Adds documentation for module format
- Sidebar - Sidebar now have several size variations, and a new styled variation that comes preformatted
- Code samples will now automatically format indention
- Dropdown changeText and updateForm have been deprecated and will be removed in 1.0
- Simplified possible dropdown actions changeText and updateForm are now consolidated into activate which is the new default
- Adds small/large sizing of modal, reformats default modal size to be slightly inset from page grid
- Adds automatic menu formatting for buttons inside menus
- Fixes right menu formatting in secondary menus
- Updates form and accordion docs
- Dropdown action default is now automatically determined based on type of dropdown, select dropdowns now will update form fields with default options
- Adds more html5 form support for forms (deneuxa)
- Dropdown now formats top and right arrow icons automatically with icon coupling with sub menus
- Fixes dropdown to now set active item to whatever hidden input field is when using action updateForm
- Modals can now have an icon in its left content that will be automatically formatted
- Removed selector count from performance logs
- Updated documentation for sidebar, transition, and form validation