ReCaptcha: hooking to TextBox's OnKeyDown from script - javascript

I'm working with ReCaptcha, ASP.NET and Gaia Ajax. It took me some time to use the ReCaptcha AJAX APIs combined with Gaia to retrieve the contents of the recaptcha_response_field text box in AJAX postback through a patch.
This was just to introduce you to the subject. Now I would like to apply another patch to ReCaptcha, without reimplementing it (a comprehensive open source library that works better than current ASP.NET implementation would be desirable, but I have no time for that): this question explains which.
Basically,
I need, after calling ReCaptcha.Create(), which renders the CAPTCHA during an AJAX postback, to hook to the OnKeyDown event of recaptcha_response_field and inject my Javascript snippet that prevents the form from being submitted.
You understand that since I don't render the <input> tag (I don't have control over it), I must hook from the external.
In general,
I think you may actually answer the general question: "how to set JavaScript event handlers programmatically?" because this surely applies to all classes of events.
Thank you

I wouldn't recommend on-the-fly checking of captcha, because then a program could just brute force it, after figuring out the basic characters of the picture.
I always use jquery for event handlers
something like:
$(function()
{
$("#{TEXTBOXID}").keydown(function(event)
{
alert(event.keyCode);
});
});
(taken from Why does JQuery keydown work for window but not textbox?)

Related

Validate Html 5 input without form tag?

Is it possible to trigger browser built-in html 5 validation process without form tag? I want to show the browser error messages if my input control is invalid without using form tag. I know I can check validation using checkValidity function but how to tell browser to trigger validation process?
I agree with CBroe , I'm not sure you can use HTML5 form validation without a actual form.. I've found this link and it should be of some use to you:
https://stackoverflow.com/a/7562439/4092442
You can't trigger the native validation UI, but you can easily take advantage of the validation API on arbitrary input elements:
$('input').blur(function(event) {
event.target.checkValidity();
}).bind('invalid', function(event) {
setTimeout(function() { $(event.target).focus();}, 50);
});
The first event fires checkValidity on every input element as soon as it loses focus, if the element is invalid then the corresponding event will be fired and trapped by the second event handler. This one sets the focus back to the element, but that could be quite annoying, I assume you have a better solution for notifying about the errors. Here's a working example of my code above.
If that does not help, perhaps you can get creative and create a form, that doesn't look like a form. Hide the submit button etc. That way you can take advantage of the functionality.
Also, maybe provide a little more explanation as to what it is you're trying to accomplish. I have personally found that helps people offer detailed solutions. Solutions I often never even considered. :) Hope this helps!
This is absolutely possible using .reportValidity(), not sure why the other answers said it isn't. An example to check all inputs for validity:
document.querySelectorAll('input').forEach(e => e.reportValidity())
Later, but it can be help to news search.
You can use
$(elem)[0].reportValidity()

How to fire a DOM event with YUI3

I've encountered an annoying issue while working on YUI.
I have a main area and a navigation block. The elements in the main area can be activated with a direct click or by clicking an element in the navigation block that triggers the appropriate element in the main area.
As it turns out, triggering a click event programmatically in YUI isn't as simple as I thought it might be. Looking at the documentation I found pleanty of information on how to attach and delegate events but not how to call one.
I found this question, but it deals with creating a new custom event and not calling an existing one.
All other similar questions are answered with using .simulate(), but this is actually not the best option for compatability reasons and it's also not recommended by YAHOO itself for client-side use http://yuilibrary.com/yui/docs/event/simulate.html#faking. EDIT: After re-reading the section I realized the warning is irrelevant for the subject of this question.
I found a solution by calling the click() command in the node's DOM element, but this is really a last resort and I would like to know if there's a more "clean" way to do it through YUI.
Here is an example of what I'm doing now: http://jsfiddle.net/3fso2dg8/
In the example, the second button is triggering the click event of the first button by using the DOM element
Y.one('#clickme')._node.click();
CONCLUSIONS
After more fiddling with the code I came to realize simulate() is the preferred option in most cases, but not all.
The YUI vesrion I'm required to work with (3.14) has a known issue on simulating a click event in IE9 and above. Since - for other technical reasons - I cannot upgrade to whatever version this issue was fixed and I need to keep a multi-platform compatibility, my original solution is still the best option. Anyone else that uses YUI components that don't respond well on IE, maybe you stumbled upon the same issue so this is one way to solve it.
After looking for exactly the same functionality I just used simulate in user-facing code - where It would just mimic clicking with no return method etc. (simple submit button or choose fil trigger).
When I would needed "complex" functionality I would just add a class or new ID and add new delegate or "on" method in my code - following the: "If a function needs to respond to user action or be called programmatically, it should be written accordingly and called directly in the latter case." prinsipp.
So to summarize - I use simulate for very simple effects with no callbacks or other "advanced" stuff and (sadly) duplicate other delegate/on elements where simulating would be tricky...
Had also looked into your method (._node.click();) and I can't see no obvious difference comparing to simulate()...

In JavaScript, why does the blur method trigger a blur event, but the submit method does not trigger a submit event?

I was thinking of forcing an onblur handler to run by calling the element's blur method. But then, I thought it wouldn't work, because I remembered that calling submit on a FormElement does not cause its onsubmit method to be run.
After some experimentation, I found that calling blur does cause the element's onblur handler to get called. This seems very inconsistent, not that it surprises me (this is JS after all). Still, if there's a good reason for this, I'd like to know. Is there a good reason to call the handler in the case of blur but not submit?
I agree it seems inconsistent. My take is that OnSubmit behavior has a ton of legacy baggage because much of its functionality was designed so that people could code right inside of form elements. To this end onsubmit was used to validate input without cracking open a source editor or javascript file. My guess is that when they coded this behavior (a long time ago), this seemed wise because once you are in javascript the programmer can easily validate the input themselves so the automatic check isn't necessary. Seems like an oversight to me.
This following website on quirksmode specifically warns of this, so clearly many people are being confused by this.
http://www.quirksmode.org/js/forms.html

autogenerate jquery code

We all use and like that to handle click event for button we can just click it and write a handler with server code in C# or vb.net.
But if we want to handle client event, javascript comes for help. And I wonder, how can we add designer ability to generate client handlers with javascript or some popular library like jquery.
So how I see it in perfect world, I'm selecting the button in designer, go to it's properties, then choose events like hover, enter or click and have a handler function in which I can write my code to handle it.
So the question is - how can it be done, to make this ability to autogenerate this empty function and make sure it will handle the exact event I need? I know how to handle this events in javascript, but this way seems more intuitive to me.
Microsoft's Glimmer writes jQuery. They also have a nice demo video on their frontpage. Glimmer is free, by the way.

Is there a way to globally intercept events when jquery is used?

I have a site which has jquery included in the header. the application makes heavy use of jquery. now, that site uses ajax and shows up different message boxes when the user does something (it's a third party product used). I want to modify these boxes, but I need a piece of code to take action as soon as the DOM gets manipulated by ajax or jquery, or as soon as jquery receives any message with ajax, and then I must intercept that message, manipulate it and pass it on. I have no clue about jquery, but I do have about javascript. Does jquery offer something for this situation?
If you have control of the JavaScript you can just figure out where the popup boxes are in the code and replace them with what you need.
You can add a global AJAX handler for various AJAX events. You might want to see if the ajaxSuccess handler allows you to do what you want.
tvanfosson is correct, but i can elaborate further. There are 6 universal Ajax events that are triggered with ANY ajax call through jQuery. They are very cool, and you can make a universal include script that will handle all event on all pages the same way.
Complete List - Look under "Ajax Events"
The big ones are:
AjaxStart - Triggered anytime any ajax call is made. Good for showing an animated gif in a floating dialog to show processing is happening.
AjaxStop - Triggered when all ajax calls have stopped. Good for hiding said animated processing gif
AjaxError - triggered anytime an ajax error occurs. Hint: Display the message in a floating dialog
AjaxSuccess - not really recommended as a universal event. Specify unique events for each actual ajax instead.
Hopes this helps!

Categories