Is is possible to disable ctrl+S save in a form?

  • 0
  • 1
  • Question
  • Updated 4 years ago
  • Answered

I have a form that I'm using Dan's image on-load technique to do a phone number validation. It limits the field to 10 digits (0-9) and disables the save button until it's correct. While this has helped stop people from copy and pasting from another system, we still get the occasional offender. The only way I can think to bypass this is to use ctrl+s to save the form. I have never told anyone that ctrl+s even exists but that does not mean someone hasn't stumbled upon it. I have tested this and it will save when the save button is disabled. 

I'm wondering if the keyboard shortcut can also be disabled? 

Thanks,

David

Photo of David

David

  • 80 Points 75 badge 2x thumb

Posted 4 years ago

  • 0
  • 1
Photo of QB_Support_Brian

QB_Support_Brian

  • 40 Points
Hi David,



The control+S keyboard shortcut to save a record is a function of the web browser, and unfortunately there is not currently a function built into QuickBase to disable it. I'm sorry for the inconvenience.



Thanks,

Brian
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
I am confused what you are asking about. Ctrl+S will initiate saving the page to your local disk. You can disable it like this:

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=419


But you appear to be saying Ctrl+S saves the record? Please clarify.
Photo of David

David

  • 80 Points 75 badge 2x thumb
I am saying that hitting crtl+s will save my record in quickbase just as if I hit the save button. This works even when the save button is disabled by code (see below) using IOL technique. I have this in the new record and edit record sections. Hitting Ctrl+s gives me the same yellow "Saving..." alert on screen just as the button will do.

$("#_fid_106")
  .attr("pattern", "[0-9]{10}")
  .on("change keyup blur", function() {
    if ($(this).is(":invalid")) {
      $(this).css("color", "red");
      $("#saveButton").css("pointer-events", "none");
      $("#saveButton").next().hide();
    } else {
      $(this).css("color", "#333");
      $("#saveButton").css("pointer-events", "auto");
      $("#saveButton").next().show();
    }
  });
Photo of QB_Support_Brian

QB_Support_Brian

  • 40 Points
Sorry about that, Dan is correct about the default Control+S behavior in modern web browsers. While we do not currently have a user option to turn off that shortcut, there may be a custom way to disable this as Dan indicated.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
I would have to see the app  to debug. FWIW, the basic "invalid logic" looks like it is working based this small test:

http://jsbin.com/xiyalonani/1/edit?html,css,js,output

I thought for a moment that there may be an issue with using the pseudo selector :invalid with the version of jQuery QuickBase is using.

I am not sure what you are doing with the .next().show() as that seems to probe into QuickBase's page and raises a flag at least initially. When you are doing your own form validation you have to work in a plane that is ahead QuickBase's validation planes. In other words your logic should be interposed before the native handles start reacting to the events. Otherwise you are going to working in a tangle of potentially interacting callback and things like bubbling and capturing will make it difficult to understand what is going on. Also I am not sure I still understand the Ctrl+S issue without an example which seems to be the primary focus of your attention at the moment. Debugging your own events is difficult and debugging other people's events can be maddening.

To summarize: there are too many possibilities to debug this without seeing the working application. I always look to create the smallest working example that reproduces the problem as part of the debug process.
Photo of David

David

  • 80 Points 75 badge 2x thumb
What I'm trying to do seems simple but not being a coder by nature I may be doing something wrong. Always a possibility! Let me comment a few lines to show you what I'm trying to do. Perhaps you can correct me.
$("#_fid_106")
  .attr("pattern", "[0-9]{10}")
  .on("change keyup blur", function() {
    if ($(this).is(":invalid")) {
      $(this).css("color", "red");   //Color stays red until 10 digits are present
      $("#saveButton").css("pointer-events", "none");  //Disables save button until correct (won't click)
      $("#saveButton").next().hide();   //Disables the down arrow button next to save so they can't choose save and add another (which worked even though the save button was disabled)
    } else {
      $(this).css("color", "#333");
      $("#saveButton").css("pointer-events", "auto");
      $("#saveButton").next().show();
    }
  });
I'm getting the correct behavior in the form that I'm looking for but even if they have the wrong number of digits (and the numbers are still red) the user can still hit ctrl+s and the record saves anyway. I can't find a way to plug that hole. Ctrl+s while you are adding or editing a record does not bring up the "Save to" dialog box to save the page/record to my local drive. It just saves the record as if I hit the save button.
I hope this helps.
Photo of David

David

  • 80 Points 75 badge 2x thumb
Ctrl+S is a keyboard shortcut that I learned about in this thread (towards the bottom)
https://quickbase-community.intuit.com/questions/168439

I'm wanting to know if I can disable that shortcut until the validation process is complete. I'm not trying to beat a dead horse here...just trying to firm up an escape hatch in the validation process.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
That post was relevant to the old UX not the new UX. I don't think QuickBase uses access keys any longer and are moving towards ARIA (Accessible Rich Internet Applications) with the rest of the industry. It may not seem like an accessibility issue to you or me if we are not impaired but that was one of the purpose of access keys and the technology and scope has greatly expanded with ARIA.
Photo of David

David

  • 80 Points 75 badge 2x thumb
Are you saying that those shortcut keys are no longer in effect? If you are then I can assure you that it is still working in my apps. If you are not saying that then is there anything I can do to prevent the use of ctrl+s until after the validation process of that phone number field?

By the way Dan, I have gotten most of those code snippets from some of your older posts. They seem to do what I need with the exception of the current ctrl+s(save) issue. I very much appreciate all you do for us here in the forum. I'm just stuck (in an OCD way) on this. I don't want to have to go back to using formula fields and form rules (which is just slow) to accomplish this.
Thanks again,
David
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
Okay I think I finally understand what you want to do. My answer might blow your mind but you can redefined any QuickBase function. Instead of outright modifying the source you can use a concept from AOP (Aspect Oriented Programming) that allow you to create a new function from an existing function and have your new function execute code before, after or around the original function. You want to use the around pattern as you want to conditionally execute the first function.

Now underscore has a _.wrap() method which is basically the around pattern, So redefine DoSaveAdd() using this code:

DoSaveAdd = _.wrap(DoSaveAdd, function(fn) {
  // do your validation stuff here and set proceed true/false to continue with the Save of the record
  var proceed = false;
  var proceed = true
  if (proceed) fn();
});

What this snippet does is redefine DoSaveAdd() so that when in the natural course of events if a user initiates a Save the function DoSaveAdd() being called will be swapped out and your new DoSaveAdd() method will be called and you conditionally call fn() (the original DoSaveAdd() as written by QuickBase) if the validation is AOK.

Yes it is a bit of a heady concept and I am sure the QuickBase engineers are screaming down the hall but it is a better way to get the functionality you need without mucking with their code or intercepting DOM events or other hacks.

Here is what I am reading now:

Kestrels, Quirky Birds, and Hopeless Egocentricity
http://combinators.info/
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
BTW, I wrote this interposer code on a similar validation question a couple of years ago. It is basically the AOP around pattern but now that QuickBase uses underscore you may as well use _.wrap() is it has been bullet proofed.

HTML Form Validation w/in QB
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=201
Photo of David

David

  • 80 Points 75 badge 2x thumb
Thank you Dan! Consider my mind blown. Much of what you said is still over my head because of the concept  from NEP (No Experience Programming). I do think I understand the overall concept but I'm not sure how to get there from where I'm at now.

I will experiment with this to see if I can get anything to work but I have visions of trying to poke the cat out from underneath the front porch using a wet rope. I hope you won't mind follow up questions along the way.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
The fundamental concept is that functions in JavaScript can be passed around like other data and be modified - just like a string, a number or a date can be passed around and modified. So we are just taking QuickBase's DoSaveAdd() function and creating a new one - one which will perform your custom validation logic first and then conditionally call QuickBase's original DoSaveAdd function only if your validation passes. This is called the "Around" pattern in AOP parlance. The only other thing we are doing is calling your new function by the same name as QuickBase's DoSaveAdd. That way in the natural course of events when a user saves the record your new function named DoSaveAdd will seamlessly execute without having to muck around with the internals of the QuickBase authored page. It is a just game of switcherooo although the academics like to go into mind numbing abstraction when they describe these techniques in technical terms.
Photo of David

David

  • 80 Points 75 badge 2x thumb
I have been using your html form validation example from your pasties because it's a more complete example for me to follow. I got the phone number to turn red until correct as I had before but the minute I put in the DoSaveAdd part below it all stopped working including the part that was working. Here's what I have in the add record section...
$("#_fid_106").attr("pattern", "[0-9]{10}");

$("#_fid_106").on("change keyup blur", function(){
   $(this).filter(":valid").css("color", "#333");
   $(this).filter(":invalid").css("color", "red");
});

DoSaveAdd= function(fn) {
   return function(){
    if ($("#_fid_106")[0].checkValidity()) {
     alert("Valid - form will continue to save.");
     var result=fn.apply(fn,arguments);
     return result;
   } else {
     alert("Invalid - form will not save.");
  }
 }
})(DoSaveAdd);

It obviously is not using the _.wrap method but I need to take baby steps here to learn. What did I mess up?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
I think it is best to create a simple stand alone example and share it with me and defer using this thread till we find the solution. Make it as dead simple as possible and no more. This will involve working in the Developer Tool Console. FWIW, I always work in the Developer Tool Console and only after the code is working do I put it in QuickBase. The edit / eval cycle time working in QuickBase's user defined pages is way to slooooooooow because you will be constantly cutting, pasting and reloading pages to evaluate one simple change in your script.

In unrelated matters I had a friend wager me last night during our DrinkUp that I could not take a QuickBase user unschooled in JavaScript and turn them into a crack programmer and imbue them in the snarky culture and high society of a seasoned developer. Sort of like the plot in this production:

https://www.youtube.com/watch?v=MJr9SSJKkII
Photo of David

David

  • 80 Points 75 badge 2x thumb
I sent an invite to a very simple app. to your yahoo address in your profile.
Clip was a classic...even Benny Hill has done a version of that one.
FWIW, as far as I'm concerned...I side with your friend.
Photo of David

David

  • 80 Points 75 badge 2x thumb
Just wanted to let everyone know that Dan took the time to look at my test app and came up with an outstandingly elegant solution in a very short amount of time. I honestly did not expect that. Mad respect to you Dan! My inner demons are letting me relax now. Priceless....

On the other side of the coin, I don't understand why Quickbase can't build in validation for a field like a phone number. How hard would it be to make sure that if you have a US number that they can only use 10 digits (0-9) and not allow any letters, special characters or spaces? No save until it's correct. I can't believe how many times I look at our data and see short or long phone numbers because somebody copied and pasted from another system incorrectly. I've actually seen someone put a zip code in the phone number field. Any native solution I have tried using formula fields and form rules is so slow the complaints are not worth it.

Anyway, thank you again Dan. If you are ever in my area give me a call because dinner (and drinks) are on me.

David