Semantic-ui: [Form Validation] Clear errors

[ShimShamSam]

Is there a way to clear all errors on a form? A use case would be a modal form that comes up several times over the lifetime of a single page.

[jlukic]

There's no dedicated behavior for clearing all errors. I will mark this as an enhancement as the use-case seems essential.

Currently calling $('.form').form('validate form'); will clear errors if the form passes validation. You can also clear errors using $('.form .message').hide();

[ShimShamSam]

Unfortunately, this does not remove inline errors and input styles. Would it make sense to automatically clear errors on a form's "reset" event?

[jlukic]

To my knowledge validate form will remove inline validations if they are valid.

It calls validate field which does that here

[deltoss]

The problem with using $('.form .message').hide(); is after you try submit the form a second time, and form is invalid, the error messages would not show. What that hide() does is modify the inline css style which takes precedence and overrides the semantic css styling based on classes.

The way I went about this is removing the "error" class from the ui form and ui fields.
Here's the jquery code:

    var aFunction = function()
    {
                //#aBtn resets semantic UI modal form and then displays it
                $("#aBtn").on("click", function(){
                       //Resets form input fields from data values
                       $('.ui.form').trigger("reset");
                       //Resets form error messages and field styles
                       $('.ui.form .field.error').removeClass( "error" );
                       $('.ui.form.error').removeClass( "error" );

                       $('.modal').modal('show');
                });
    }
    $(document).ready( aFunction );

[hyperborea]

Any news on this one? I need to set values to a default set, which shouldn't trigger validation straight away (as it won't and doesn't have to pass it). Unfortunately "set values" does exactly that.

[princeandrew01]

Not sure if this will help anyone out there but this is an example of something I had done with tabs:

I had three tabs representing one form. It was a ton of fields in the form so splitting it into three tabs seemed like a logical choice. Additionally I didn't have to submit each tab before going to the next tab. Back to the issue, I was experiencing the following:

1. At initial load the page just did not hide the ui error message box.
2. I could not validate the entire form but had to do it as the tab changed.
3. Every time a tab changed I would reset the validation errors to the current tab loaded by calling the $('.ui.form').form('fields: {.....});
4. However every time I went back to previous tab it would fire the validation for that tab.
5. To solve the problem in both 1 and 4 I created a dummy hidden field and called validation on it when it was equal to a value (essentially it would always be valid). I then did an each on the .error.field and removed the class error.

That was the only way I could clear the errors and make sure when going backwards in tabs it did not validate and hide the error message on top of the page.

I hope this helps someone who maybe stuck as well, additionally anyone who has any suggestions on how I could have solved this problem differently would be helpful!

EDIT: I forgot to mention clearing the class error does not remove inline error messages. Since my form does not use them I didn't have to but I suspect a .remove() would remove the error inline as necessary.

[avalanche1]

+1 for adding .form('clear errors')

[avalanche1]

@princeandrew01 , thanks for $('.ui.form').form('fields: {}) :smile:

[imilina]

Also +1 for adding .form('clear errors'). Another use case would be SPA javascript applications where underlying data is changed but html form is reused.

[LeMiniMoine]

+1 for adding this. My problem is that I have a button to revert the changes in a form if I want to go back to original pre-filled form. If error messages were there, they never disappear. Using 'reset' clears all the fields and the errors but then all fields are empty.

[LeMiniMoine]

Hey all,

Finally I managed to make it work by using a part of semanticUI source code. I'm using Angular for the controller so I created a directive to add to the form.

Here is a code snippet that might help:

var clearErrors = function () {
                    var $field = $(formElement).find('input, textarea, select'),
                        $group = $(formElement).find('.field');
                    $field
                        .each(function () {
                            var
                                $field = $(this),
                                $fieldGroup = $field.closest($group),
                                $prompt = $fieldGroup.find('.prompt.label'),
                                isErrored = $fieldGroup.hasClass('error');
                            if(isErrored) {
                                $fieldGroup.removeClass('error');
                                $prompt.remove();
                            }
                        });
                };

Basically, I just used some parts of the form.reset() function from semantic.js without the clear() part.

[talha-asad]

+1 seems like a primitive utility

[craftzdog]

It works fine for me.

$(formElement).find('.error').removeClass('error');

[Panman82]

+1 for a built-in behavior/method. I think this is important for client side apps where state is kept in JavaScript.

[avalanche1]

+1 I need this once again

[ynnk]

+1

[rpsirois]

+1

The following was my fix (obviously absent any actual val sets):

$selector.form({fields:{}});
$selector.form('validate form');

[matantsu]

+1 for $(form).form('clear errors')

[thiagoaag]

I'm using on a little project.
maybe can help!

// remove list of errors
$('form-id').find('.ui.error.message ul').remove();

remove prompt
$('form-id').find('.error').removeClass('error').find('.prompt').remove();

[d31m07y1988]

I' using this
$('.ui.error.message').empty();

[neokio]

@jlukic I think your first instinct was correct, this use-case is essential. $('form').form('clear errors') would be a great addition.

I tend to use the a form's onSuccess to trigger submission via ajax. I also tend to use the same form for record creation (first calling $('form').form('clear')) and record editing (pre-filling inputs via ajax). Calling $('form').form('validate form') on a pre-filled form triggers onSuccess, which is not desirable.

My workaround (thanks contributors above) is this:

$('form .field.error').removeClass('error');
$('form .ui.error.message ul').remove();

[neokio]

Every time I start a new project, I'm frustrated by having to re-discover that $('form').form('clear'); does nothing to hide previously triggered validation errors.

When I clear a form, and it happens to have a field with validation rule of type 'empty', I shouldn't have to jump through extra hoops to actually clear the form.

TL/DR: $('form').form('clear'); should remove any existing error messages, and not validate the empty form until user entry.

[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.

[Panman82]

Bump (due to stale bot). This is still an issue that needs addressing.

[neokio]

Running into this again. Have to keep looking it up.

[neokio]

And again. Now I'm just posting to thwart the stalebot invasion :)

[neokio]

Again. Seems I bump into this once a month.

Doing $('form').form('reset) does not clear validation error messages (though it DOES clear field error highlighting).

@d31m07y1988's interim solution is the most elegant so far:

$('form').form('reset');
$('form .ui.error.message').empty();

[deezaster]

i'm using this:

$('form .field.error').removeClass('error');
$('form .ui.basic.red.pointing').remove();

[ezRAez]

bump for stalebot

[shojajou]

+1

The following was my fix (obviously absent any actual val sets):

$selector.form({fields:{}});
$selector.form('validate form');

This was solved the problem. Thanks.

[kamranmuazzam]

$('.form').form('clear'); does the job at this time. It might not have behaved the same before but it does now.

It clears all the error messages.

[ttimt]

My scenario is that i'm using form inside a modal and the OK button is not linked to the form.
So there's different behavior from enter and OK button.
Even when i clear form and hide message after submitting form, error will appear as I press the key enter (focused). My form validation is on 'blur'.

The solution is using modal on show:
.modal({
onShow() {
form.form("clear");;
}
});;

[Lehavi]

April 2020: .form('clear') indeed clears field-level errors but .ui.error.message still requires .empty()
+1 for .form('clear') 6 years and counting

[lukechu10]

April 2020: .form('clear') indeed clears field-level errors but .ui.error.message still requires .empty()
+1 for .form('clear') 6 years and counting

Wait, this does not seem to work with inline fields

[lubber-de]

Fixed for Fomantic-UI by https://github.com/fomantic/Fomantic-UI/pull/1611