如果在jQuery中放错了位置，脚本将不起作用

Question

i will create website with validate in input field, i used Mottie Keyboard in every input field, and i use validation on it. i will create disable button when validation is not correct. And I get a script for it, directly from github page mottie keyboard. I want is if the validation was not correct then the button in a virtual keyboard can not be pressed. Here's the script:

var toggleKeysIfEmpty = function( kb ) {
             var toggle = kb.$preview.val() === '';
             console.log( toggle, kb.$preview.val() );
             kb.$keyboard
        .find('.ui-keyboard-bksp')
        .toggleClass('disabled', toggle)
        .prop('disabled', toggle);
};

And this my script before adding script above:

$(function() {

  // change default navigation keys    
  $('#jkeyboard2, #jkeyboard').keyboard({
    layout: 'num',
    // setting alwaysOpen does odd things with input focus on initialization
    // best to leave it false and focus on the desired input
    // alwaysOpen: true,
    autoAccept: true,
    usePreview: false,
    position: {
      of: $(window),
      // null (attach to input/textarea) or a jQuery object (attach elsewhere)
      my: 'center bottom',
      at: 'center bottom',
      at2: 'center bottom'
    },
    maxLength: 4,
    layout: 'custom',
    customLayout: {
      'normal': ['1 2 3', '4 5 6', '7 8 9', '0 . {b}'],
    },
    visible : function(e, keyboard) {
        toggleKeysIfEmpty( keyboard );
    },
    tabNavigation: true,
    initialFocus: false,
    initialized: function() {
        setTimeout(function(){
            $('#jkeyboard').focus();
        }, 200);
    },
    change: function(e, keyboard, el) {
      if (keyboard.$el.val().length >= 4) {
        // switchInput( goToNext, isAccepted );
        keyboard.switchInput(true, true);
      } else if (keyboard.$el.val() === "" && keyboard.last.key === "bksp") {
        // go to previous if user hits backspace on an empty input
        keyboard.switchInput(false, true);
      }
    }
  })
});

$(document).ready(function() {
      $('#jkeyboard').bind('keyboardChange', function (e, keyboard, el) {
        if (validatePhone('jkeyboard')) {
          $('#spnPhoneStatus').html('');
          $('#spnPhoneStatus').css('color', 'green');
        } else {
          $('#spnPhoneStatus').html('<b>Wrong Number</b>');
          $('#spnPhoneStatus').css('color', 'red');
        }
      });
    });

    function validatePhone(jkeyboard) {
      var a = document.getElementById(jkeyboard).value;
      var filter = /^0(?:8(?:(?:1(?:[789][0-9]{0,9})?|3(?:[1238][0-9]{0,9})?|5(?:9[0-9]{0,9})?|7(?:[78][0-9]{0,9})?)?)?)?$/;
      //var filter = /^0([8]([1357]([123789]([0-9]{0,8}))?)?)?$/;
      if (filter.test(a)) {
        return true;
      } else {
        return false;
      }
    }

I want disable backspace button if validation was not correct, so i added the script. And become like this:

$(function() {

  // change default navigation keys    
  $('#jkeyboard2, #jkeyboard').keyboard({
    layout: 'num',
    // setting alwaysOpen does odd things with input focus on initialization
    // best to leave it false and focus on the desired input
    // alwaysOpen: true,
    autoAccept: true,
    usePreview: false,
    position: {
      of: $(window),
      // null (attach to input/textarea) or a jQuery object (attach elsewhere)
      my: 'center bottom',
      at: 'center bottom',
      at2: 'center bottom'
    },
    maxLength: 4,
    layout: 'custom',
    customLayout: {
      'normal': ['1 2 3', '4 5 6', '7 8 9', '0 . {b}'],
    },
    visible : function(e, keyboard) {
        toggleKeysIfEmpty( keyboard );
    },
    tabNavigation: true,
    initialFocus: false,
    initialized: function() {
        setTimeout(function(){
            $('#jkeyboard').focus();
        }, 200);
    },
    change: function(e, keyboard, el) {
      if (keyboard.$el.val().length >= 4) {
        // switchInput( goToNext, isAccepted );
        keyboard.switchInput(true, true);
      } else if (keyboard.$el.val() === "" && keyboard.last.key === "bksp") {
        // go to previous if user hits backspace on an empty input
        keyboard.switchInput(false, true);
      }
    }
  })
});

$(document).ready(function() {
      $('#jkeyboard').bind('keyboardChange', function (e, keyboard, el) {
        if (validatePhone('jkeyboard')) {
          $('#spnPhoneStatus').html('');
          $('#spnPhoneStatus').css('color', 'green');
        } else {
          $('#spnPhoneStatus').html('<b>Wrong Number</b>');
          $('#spnPhoneStatus').css('color', 'red');
      var toggleKeysIfEmpty = function( kb ) {
             var toggle = kb.$preview.val() === '';
             console.log( toggle, kb.$preview.val() );
             kb.$keyboard
        .find('.ui-keyboard-bksp')
        .toggleClass('disabled', toggle)
        .prop('disabled', toggle);
            };
        }
      });
    });

    function validatePhone(jkeyboard) {
      var a = document.getElementById(jkeyboard).value;
      var filter = /^0(?:8(?:(?:1(?:[789][0-9]{0,9})?|3(?:[1238][0-9]{0,9})?|5(?:9[0-9]{0,9})?|7(?:[78][0-9]{0,9})?)?)?)?$/;
      //var filter = /^0([8]([1357]([123789]([0-9]{0,8}))?)?)?$/;
      if (filter.test(a)) {
        return true;
      } else {
        return false;
      }
    }

it's doesn't work, and i try put the code i get at the top of my code. it's work but backspace button can not be pressed from the start. Anyone can fix it?

Here's my fiddle: DEMO

Answer 1

I have changed your code to update the fiddle here : you wanted to

disable backspace button if validation was not correct

so here's what I did:

1. I renamed toggleKeysIfEmpty to toggleBackspaceKey and changed its implementation to add the CSS classes to render the button correctly depending on the desired state:

   var toggleBackspaceKey = function( kb, toggle ) {
console.log( toggle, kb.$preview.val() ); var $bkSpaceBtn = kb.$keyboard.find('.ui-keyboard-bksp'); if (toggle) { $bkSpaceBtn .attr({ 'disabled': 'disabled', 'aria-disabled': 'true' }) .removeClass(kb.options.css.buttonHover) .addClass(kb.options.css.buttonDisabled); } else { $bkSpaceBtn .removeAttr('disabled') .attr({ 'aria-disabled': 'false' }) .addClass(kb.options.css.buttonDefault) .removeClass(kb.options.css.buttonDisabled); } };

2. I changed the implementation of the bksp keyaction handler to ensure that if it's invoked when the button is disabled, no action is executed. The handler for the backspace will be invoked if you press the corresponding key or if you double click on the backspace button in the keyboard even when it's disabled (this might be a bug). Here is the handler code: if the backspace button is enabled it simply invokes the default backspace processing handler. Also, this function is invoked once from the visible callback:

   var processBkSpcKey = function(kb) { var originalBkSpaceHandler = $.keyboard.keyaction.bksp; $.keyboard.keyaction.bksp = function(base) { // If the backspace button is disabled, do not process it. var $bkSpaceBtn = kb.$keyboard.find('.ui-keyboard-bksp'); if($bkSpaceBtn.hasClass(kb.options.css.buttonDisabled)) { return false; }
return originalBkSpaceHandler.apply(kb, arguments); } };

With these changes in place, the backspace button is disabled if the input is empty or if the validation fails, in this case though, how would the user clear the contents of the input?