Support for warnings?

[navnitmehta]

Is there a way to show warnings?

I have a need to show warnings based on the rules existing in Validation framework, all I want is to highlight elements, but don't want to block the user from saving.

[ericmbarnard]

@navnitmehta

Validation doesn't, by default, block the user from saving. It is really up to you if you want to present the message as a warning or a full on "error" and it is also up to you to prevent the form from submitting if it is invalid.

With that, I will look into seeing if there's a way to allow for indicating the 'severity' or such for a validation error.

[navnitmehta]

What I cant do right now is that from the list of errors in the group identify if all errors are severity 'error' & also cant apply different styling for warning.

Now that I think about it further, I might have 2 validations on the same observable e.g. password with required & min-length of 5; where 'required' is a severity Error & 'min-length' is severity Warning, so the implementation gets a little complex since we have same object that can have either of the 2.

Looking at the source code, I think to incorporate warning we would need to:

1. Have following config for indicating if its a warning, default would be error.

        login.Password.extend(
            {
                minLength: { minLength: 5, message: "A password greater then 5 characters is stronger.", severity: 'warn' },
                required: true
            });

1. validateSync & validateAsync should not set IsValid to false, for warning (based on severity == 'warn'), instead set ShowWarning = true.
2. validationMessage should also show the messages for warning based on ShowWarning.
3. To support different styling for warnings there would be warningElementClass, validationElement should use this class for warnings, if IsValid is false then, warning css would not be applied.
4. And the clean up code.

If you agree with the above, I can try to incorporate this.

[ericmbarnard]

@navnitmehta

That logic looks correct - the most important piece here would be ensuring that this doesn't break current functionality. The default would be to always assume severity: error.

[asteffes]

Any progress on this issue? I have the same requirement.

[ctoestreich]

This feature would be much appreciated. Add a severityLevel observable that returns 'error' by default, but can be overridden in validation setup for a rule to be any string.

[lostincomputer]

severityLevel is also extremely useful to us.

Since Knockout Validation can only display one error at a time, it would set observable.error and observable.severityLevel to the violated rule that has the highest severity.

[mokkabonna]

+1 this wuld integrate nice with bootstrap, errors, warning and info, and setting the has-error, has-warning etc on form groups.

[egucciar]

Anyone try this?

[egucciar]

I was going to give it a go using 1 extra observable for severity, but showing the highest level severity error will be difficult because the validation logic currently breaks out of the loop once it finds an error. If I make it so that it doesnt break out of the loop, at the end it thinks it is valid and will clear the error (which is actually a warning).

[m-andrew-albright]

+1 Would love if the suggestion above was implemented (severity specification)

[egucciar]

I have implemented this in a fork

I never cleaned it up otherwise i would have pull requested it.

It adds a "severity" observable to the input and to the validation options when you pass in (along side message, for example). Then you can use that to style your classes differently.

Currently using it to support warnings (severity 2) and info (seveirty 3). severity 1 is error and even though isValid will be false in all 3 scenerios, we only prevent form submission if the severity is 1 and it is invalid.

https://github.com/EikosPartners/Knockout-Validation

[Hekku2]

+1 This is useful.

[jfrank14]

How do you apply the severity setting? I've tried various syntaxes like extend({ minLength: 2, maxLength: 10, severity: 2 }) but the code doesn't seem to be doing anything with the severity. Is there any example code showing usage?

[egucciar]

Hey @jfrank14, I was able to get warnings support by forking this library. You can check out the code / commit history for what we did to achieve it

https://github.com/EikosPartners/Knockout-Validation

[egucciar]

@jfrank14 Also the way it works is that it exposes a .severity() observable on top of the observable being extended. You would access like input.severity(), similar to input.error(). Also keep in mind the severity is per validation. You need to use syntax like maxLength: { Params:x, message: y, severity 1 }

[jfrank14]

Thanks for the speedy response. But I'm still not sure of the syntax I'm supposed to use. Suppose I have this code:

        //validations on the password field
        ko.getObservable(this, "password").
           extend({ minLength: 2, maxLength: 10})

and I want that min/max validation to have a severity of 2. How would I code that? I tried variations of your code snippet without success :-(

[egucciar]

@jfrank14 first be sure to either incorporate our fork into your project or use the fork.

Second, please paste the updated code , with the specification of your severity on the observable, and your usage of the severity observable in the other part of your app.

[jfrank14]

I am using your fork, but I don't have code specifying the severity because I can't find any sample of what that's supposed to look like. Can you post a code sample showing how to set the severity on the observable?

[egucciar]

@jfrank14

const input = ko.observable().extend({ 
    maxLength: { 
        params: 10, 
        message: 'This is just a warning',
        severity: 2
    },
    required: true
})

// at a later point

if (input.severity() === 2 && input.error()) {
    // handle error...
}

[jfrank14]

Ah, I see thanks. But I'm now I'm still a bit confused because the generated html for the warning doesn't indicate the severity in any way, so there's no way to style a warning differently from an error:

<span>
    <input id="password" data-bind="value: password" value="example" title="This is just a warning" class="validationElement" data-orig-title="" type="text">
    <span class="validationMessage" style="">This is just a warning</span>
</span>

I would have expected that the validationMessage span would be decorated with another class like severity-2, so that it could be styled appropriately for a warning as opposed to an error. Am I missing something here, or is there a workaround you could suggest?

[egucciar]

@jfrank14

I guess you can do data-bind: css : password.severity() === 2 ? 'warning' : 'error'

[jfrank14]

I'll see about doing that, but at a minimum it would mean a lot of repeated code, changing only the field name. How hard would it be to implement in the code the logic to add the class to the validator, so that this could be styled globally?

[egucciar]

@jfrank14 I never used the default templating options, rather I created my own input "component" that way such a concern never applies to me. You can dig into the ko library and change it however you like.