Override onclick event for a custom action

Question

I added a custom control to a display form on a list using sharepoint designer so that when it is clicked it will execute a workflow. I need to add a validation in the button using jquery or javascript so that if a field which is called "Validated" is marked as true then the button can be pressed and the workflow executed but if not then pop up an alert and ask the user to edit the item and mark it as "yes".

I can read the value of the column "validated" with jquery and I added the following javascript using a script editor webpart in the display form and it displays the alert when button is pressed but I want to prevent workflow execution. It is supposed that with the "return false;" statement to prevent the workflow execution but is not working. I want to override the button functionality so that it does nothing if the value is "No". Your support is really appreciated

$(document).ready(function(){       
//display modal window
   $("a[id='{9459D65B-3AEB-410B-9AED-AE69A7B9049A}-Large']").click(function() {
      alert("message box");
      return false;
   });
});

Answer 1

I wrote a blog post about it.

The code would be:

function ribbonIsLoaded() {
  // find the button you want to change
  var a = document.getElementById('{9459D65B-3AEB-410B-9AED-AE69A7B9049A}-Large');
  // remove the default action for this button
  Sys.UI.DomEvent.clearHandlers(a)
  // define your own action
  a.setAttribute("onclick","");
  a.setAttribute("href", "#");
  a.onclick = function(event) { event.preventDefault(); alert("OK"); return false }
}
// Note: 'SOD' is an abbreviation for "Script on Demand"

// the below function will verify the ribbon is loaded
SP.SOD.executeOrDelayUntilScriptLoaded(function () {
  var pm = SP.Ribbon.PageManager.get_instance();
  pm.add_ribbonInited(function () {
    ribbonIsLoaded();
  });
  var ribbon = null;
  try
  {
    ribbon = pm.get_ribbon();
  } 
  catch (e) {
  }
  if (!ribbon) {
    if (typeof (_ribbonStartInit) == 'function')
    _ribbonStartInit(_ribbon.initialTabId, false, null);
  } 
  else {
    ribbonIsLoaded();
  }
}, 'sp.ribbon.js');

Also, if you want to add your own buttons into the ribbon, you could check the lib I created: https://github.com/Aymkdn/RibbonPlus/