prevent initial validate

[progtarek]

is there is a way to prevent the initial keyboard validation like prevent validation from fired up only in the first time "on showing up the keyboard"

[Mottie]

Hi @progtarek!

There isn't anything build-in to prevent it, but maybe you can add a flag (demo)?

$(function() {
  let init = false;
  $("#keyboard").keyboard({
    acceptValid: true,
    autoAcceptOnValid: false,
    beforeClose: function() {
      init = false; // reset for next time keyboard opens
    },
    validate: function(keyboard, value, isClosing) {
      if (init) {
        return value.length > 3;
      }
      init = true;
      return true;
    }
  });
});

Can you describe a situation in which this useful? Maybe I could add an internal flag once the user has interacted with the keyboard, or something.

[progtarek]

Hi @Mottie, thanks for reply i am building angular 5 app I am trying to check user input only when he interacts with the input luckily I found change callback function in the docs I have 4 inputs in form, and I am using the same keyboard for them all I want to focus on the first input without the change callback being called
this is my keyboard configuration

    type: 'input',
    language: ['en'],
    rtl: false,
    layout: 'custom',
    customLayout: {
        'normal': ['1 2 3 4 5 6 7 8 9 0 {b}', 'q w e r t y u i o p {clear}', 'a s d f g h j k l - {shift}', '{space}'],
        'shift': ['1 2 3 4 5 6 7 8 9 0 {b}', 'Q W E R T Y U I O P {clear}', 'A S D F G H J K L - {shift}', ' {space}']
    },
    position: false,
    reposition: false,
    usePreview: false,
    display: {
        'b': '\u27f5',
        'clear': '\u21E4',
        'enter': '\u21a9',
        'shift': '\u21ea',
        'space': '\u00a0',
    },
    wheelMessage: 'Use mousewheel to see other keys',
    css: {
        input: 'ui-widget-content ui-corner-all',
        container: 'ui-widget-content ui-widget ui-corner-all ui-helper-clearfix',
        popup: '',
        buttonDefault: 'ui-state-default ui-corner-all',
        buttonHover: 'ui-state-hover',
        buttonAction: 'ui-state-active',
        buttonActive: 'ui-state-active',
        buttonDisabled: 'ui-state-disabled',
        buttonEmpty: 'ui-keyboard-empty'
    },
    lockInput: false,
    restrictInput: false,
    restrictInclude: '',
    enterMod: 'altKey',
    stopAtEnd: true,
    appendLocally: false,
    stickyShift: true,
    caretToEnd: true,
    scrollAdjustment: 10,
    maxLength: false,
    maxInsert: true,
    repeatDelay: 500,
    repeatRate: 20,
    resetDefault: false,
    openOn: 'focus',
    keyBinding: 'mousedown touchstart',
    useWheel: true,
    useCombos: false,
    alwaysOpen: false,
    initialFocus: false,
    noFocus: false,
    stayOpen: true,
    userClosed: false,
    ignoreEsc: true,
    appendTo: '.keyboard-container',
    cancelClose: false,
    tabNavigation: false,
    enterNavigation: true,
    autoAccept: true,
    autoAcceptOnEsc: false,
    acceptValid: true,
    autoAcceptOnValid: false
}

[Mottie]

Hmm, since the validate function is called before the beforeVisible - to update the state of the accept key - we can use it to our advantage by setting the acceptValid to false initially (demo):

$(function() {
  $("#keyboard").keyboard({
    acceptValid: false,
    autoAcceptOnValid: false,
    beforeVisible: function(e, keyboard, el) {
      keyboard.options.acceptValid = true;
    },
    change: function() {
      console.log("change callback");
    },
    validate: function(keyboard, value, isClosing) {
      return value.length > 3;
    }
  });
});

I added a log to the change callback to make sure it's not being called on initialization.

[progtarek]

perfect you awesome man, thanks for the help :)

[Mottie]

It's not an ideal solution... I'll look at making sure the change callback isn't called on init.

[Mottie]

I've added a checkValidOnInit option in v1.28.0, so now you don't need to use the extra code I shared above; just set the new option to false.

[progtarek]

HI @Mottie , thanks for reply and sharing, it works perfect 👍