[Form / Input] Add Success State for Input, Form Validation

[gluons]

Success state is important. Please let it be avaliable in Form.

<div class="ui form">
    <div class="field success">
        <label>Username</label>
        <input placeholder="Username" type="text">
    </div>
</div>

[jlukic]

There's an undocumented success state on form. Which will show success message in form, but there is no input styles for success.

I've added this as an enhancement.

[gluons]

Now, I can't find this in Semantic-UI 2. I've tried to create custom success state.

.ui.form .field.success label {
    color: #308330;
}
.ui.form .field.success input {
    background: #f4faf4 none repeat scroll 0 0;
    border-color: #a3c293;
    border-radius: 0.285714rem;
    box-shadow: none;
    color: #308330;
}
/* Success Placeholder */
.ui.form .success ::-webkit-input-placeholder {
    color: #5e9e5e;
}
.ui.form .success ::-ms-input-placeholder {
    color: #5e9e5e;
}
.ui.form .success ::-moz-placeholder {
    color: #5e9e5e;
}
.ui.form .success :focus::-webkit-input-placeholder {
    color: #558e55;
}
.ui.form .success :focus::-ms-input-placeholder {
    color: #558e55;
}
.ui.form .success :focus::-moz-placeholder {
    color: #558e55;
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[gluons]

Oh stale! Don't close this. 😰

[JuhQ]

+1

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[gluons]

stale please.

[MatheoDumont]

+1

[elamperti]

I would have expected this to be implemented the same way as error :confused:

+1

[lubber-de]

Implemented in the community fork https://github.com/fomantic/Fomantic-UI See https://fomantic-ui.com/collections/form.html#field-success