Forum Stats

  • 3,815,621 Users
  • 2,259,062 Discussions
  • 7,893,186 Comments

Discussions

Categories

Temporarily ignore validations on oj-input-date

ZacD
ZacD Member Posts: 173 Blue Ribbon
in Oracle JET

Hello,

Using JET 9.2.0 here. We have a scenario where we are intercepting a user keyboard event. We want to set the focus on an oj-input-date and also set the initial value to the key that the user pressed. The problem I'm seeing is that the single character value does not constitute a valid date, so an oj.ConverterError exception is getting thrown. This also causes the UI to display an error message to the user.

image.png

Is there any way that I can programmatically set the value of a JET component without it triggering the validations? Or possibly some way I can clear the error messages? I tried using reset(), but it just caused the error to get thrown again, as the value was still not valid.

Here's what I'm doing in the JavaScript right now, for reference:

this.eInput.focus();
try {
    this.eInput.setProperty('value', this.value); //throws oj.ConverterError
} catch (e) {
    console.warn(e);
    //this.eInput.reset(); //throws oj.ConverterError again if uncommented
}


Tagged:
· Share on TwitterShare on Facebook

Answers

  • Philip Sommer
    Philip Sommer Member Posts: 101 Blue Ribbon

    Hi ZacD,


    The validator defined on the input may define an arbitrary validate(value) function. You should be able to implement a custom validator, which always returns (valid) if some variable (of your viewmodel) is set. You can then effectively disable validation by setting that variable before setting the input value.

    See https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.Validator.html#validate

    Another approach would be to change the validators property of the input-text itself. I.e. detatch and then re-attach the validator. It should then re-run validation.

    image.png

    See https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojInputText.html#validators


    As for setting the input value, you may consider changing your code from setProperty() to utilize knockout bindings.

    Example: https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=textInput&demo=text


    Kind Regards,

    Philip

    · Share on TwitterShare on Facebook
  • ZacD
    ZacD Member Posts: 173 Blue Ribbon

    Thanks for the response, Philip. Regarding the custom validator, I'll have to give this a try. If I add a custom one, will it "replace" the default validator that oj-input-date provides? The error I'm getting right now is bubbling up from the out-of-box behavior.

    I tried messing around with a few different ways of setting the value, including knockout observables. The error showed up no matter what I tried. The code I provided above was just the latest version I tried. I may go back to the observable if I can get the validation working better.

    · Share on TwitterShare on Facebook
  • ZacD
    ZacD Member Posts: 173 Blue Ribbon

    I messed around with the custom validator, but it did not help any. The error is bubbling up from the IntlDateTimeConverter parse() function and adding custom validators to the component does not seem to impact that.

    I found this Cookbook page about creating custom converters and used it to wrap the date/time converter. Doing this, I was able to handle the oj.ConverterError before it bubbled up.

    function CustomDatabaseDateConverter(options) {
    this.Init(options);
};
CustomDatabaseDateConverter.prototype.Init = function(options) {
    this._options = options;
    this._wrappedConverter = app.databaseDateConverter;
};
CustomDatabaseDateConverter.prototype.getOptions = function() {
    return this._options;
};
CustomDatabaseDateConverter.prototype.parse = function(value) {
    var parsedValue = value;
    try { parsedValue = this._wrappedConverter.parse(value); } catch (e) {} //eat ojConverterError
    return parsedValue;
};
CustomDatabaseDateConverter.prototype.format = function(value) {
    return this._wrappedConverter.format(value);
};
CustomDatabaseDateConverter.prototype.getHint = function() {
    return this._wrappedConverter.getHint();
};

    Unfortunately, I'm still getting the "invalid ISO 8601 string" error from my original post.

    image.png

    I can't seem to find where this is originating from, or figure out how to handle this.

    · Share on TwitterShare on Facebook
  • Philip Sommer
    Philip Sommer Member Posts: 101 Blue Ribbon

    Sorry Zac,


    I was under the impression this was a custom validator for some reason.

    I don't think there is an elegant way of disabling this verification. You could try and replace the oj-intput-date with a simple oj-input-text and attach an ISO 8601 String validator yourself, but you will lose the calendar assist included with oj-input-date.


    Kind Regards,

    Philip

    · Share on TwitterShare on Facebook
  • ZacD
    ZacD Member Posts: 173 Blue Ribbon

    Right. Unfortunately, the calendar assist is the reason I'm using the oj-input-date. I originally just had it as a text input with validation, but the users would like the date picker for convenience. I tried adding an independent oj-date-picker inside an oj-popup that I reveal on focus. However, the user experience is kind of clunky and controlling focus for intuitive keyboard navigation was a challenge.

    @John 'JB' Brock-Oracle any thoughts from the Oracle team? Is there a way I can disable the implicit validators on the oj-input-date component?

    · Share on TwitterShare on Facebook
  • Marky-Oracle
    Marky-Oracle Member Posts: 17 Employee

    The underlying value type of the oj-input-date is an iso date string, so it won't allow you to assign an invalid iso date string to the value. I know of no way to disable this.

    What we really want here is to be able to set the rawValue, since you are (apparently) trying to simulate user input, and not trigger a validation call. Unfortunately, rawValue is readonly, so we can't do this.

    I will ask around, but I think the answer is that you can't do it currently.

    · Share on TwitterShare on Facebook
  • ZacD
    ZacD Member Posts: 173 Blue Ribbon

    Thanks, Marky. That's pretty much what I was expecting. Setting the rawValue is essentially what I want to do, but that is not supported, as you mentioned. I haven't tried it yet, but I was wondering if there's any way I can emulate a KeyboardEvent on the JET component? Like, if I create a new instance of the event with the right key set and use the dispatchEvent API. Would targeting the JET component work, or would I need to target the core input element, if it works at all?

    · Share on TwitterShare on Facebook
  • ZacD
    ZacD Member Posts: 173 Blue Ribbon

    I tried out the KeyboardEvent approach some today, but did not have any luck. I did, however, have some luck with another approach. After I capture the user's key press, I set the value on the core input element itself.

    this.eInput.querySelector('input').value = newValue;

    This doesn't directly set the value or rawValue in the oj-input-date. However, when the user presses their next key, the normal value update process happens since the component is now focused. The original value I put into the input then gets picked up and everything works as expected from there. Since dates require more than one key press to type out, this doesn't cause any issues, as far as I've seen.

    · Share on TwitterShare on Facebook
  • Jeanne Waldman-Oracle
    Jeanne Waldman-Oracle Member Posts: 212 Employee

    This error is coming from the converter.format because we are taking the value and formatting it for display and we can’t format the ‘1’ from the DateTimeConverter.

    Write their own custom converter which delegates to the IntlDateTimeConverter and for format it catches the error and doesn’t throw it. That way they can set the value programmatically to whatever they want.

    · Share on TwitterShare on Facebook