proper trigger to add some custom behavior on form validation? - javascript

I am trying to add some custom logic in my MVC5 project to change the behavior of unobtrusive javascript client side validation of text input. By change I mean I'd like to be able to apply bootstrap style including glyphicons dynamically.
I know it can be done by manipulating DOM - applying and removing appropriate classes (like 'has-success' etc.). Yet I don't know in what event I could handle this not to override default behavior applied in jquery.validate.*. The best situation would be if I could recognize a bad format in runtime (so let's say the user is to write number, but he's just pressed "s"), not just after button submit. I could do it quite easily by checking HTML5 attributes used for validating, but I don't know when I could do that.
I've tried on do it in document.ready(), but submitting a button doesn't make this event to trigger if there are errors(corresponding ActionResult is not called), and- that's the point I would even want it to trigger.
Any ideas what event would be appriopriate? I don't want any additional jQuery plugins etc., I'd like the behavior it is now I just need to make some changes and I need to know where I can do that.

You could use jQuery's .change() function.
$( ".target" ).change(function() {
_yourcodehere_
});
Itt fill fire whenever the selected input's value changes

Related

How to trigger async. validation in redux-form?

I am using asyncBlurFields. I tried following actions: change, startAsyncValidation, touch, blur. None is triggering the async validation. Then I read redux-form doesn't work well with hidden inputs, so I changed type to text and it is still not working. Only time when async. validation is triggered is when user blurs the element.
Is my only option to add ref to a form instance, dig out asyncValidate, get all required parameters manually and call it myself? I hope there is a better way, I don't want to add lengthy hacks to many forms. And that is my question:
How to easily trigger asyncValidate without calling it with all its parameters myself?

How to add an extra Javascript Event Handler for all Input Fields to Log Clicks+Edits?

The problem that I am trying to solve is that I have a page with many input fields (some of which are generated dynamically), and I want to be able to do some logging for whenever the user is clicking on various input controls and has modified the data, then left the control. I figure that this can be done by capturing events for onFocus and onBlur, for all types of input fields (buttons, dropdowns, text boxes, etc.). I expect to log the fact that they entered the element and also the value when they left it. However, I have two restrictions:
Some of the inputs have their own event handlers. I do not want to clobber these, but want to trigger events independently of them. Since the goal is sending off log messages, there is really no need for my additional event handlers to ever interact with the existing event handlers.
I need to have a selector that will allow me to capture all the input controls that currently exist when the user triggers the event (however many that may be). This could be done at the same time that the event fires, or it could be triggered to update whenever the DOM is modified to create/remove elements.
I imagine this is a (somewhat) common case, which seems to have some handling in major frameworks (Backbone and Prototype seem to both give some better event handling patterns), but I am trying to avoid adding another framework to the web application. The project already has a jQuery dependency though, which I think should make this possible to do with selectors.
Does anyone know of a good pattern that would gracefully support this kind of behavior?
Could you bind to the blur event via jQuery, like:
$(document.body).on('blur', 'input', function (event) {
$.ajax({ url: "/log/", data: {value: event.currentTarget.value} })
})

JQuery - best way to swap in and out parts of the UI

What's the best way to "preserve" and "re-display" portions of an html page, along with jquery event handlers you've set up?
More detail:
I'm writing a "one-page javascript application" that lets users perform two different calculations. The user selects which calculation they want by clicking a radio button.
When they click radio button A, a big part of the UI needs to get displayed with appropriate html controls (and jquery event handlers) that allow the user to enter the parameters for calculation A.
Likewise, if the user clicks radio button B, that section of the page needs instead to show all the controls (and its associated jquery event handlers) that allow the user to enter the parameters for calculation B.
My question is how to best handle the swapping of calculation A and B's html controls and their associated jquery event handlers?
I had thought about just using jquery's .html() to get and set the parameter section part of the page, but I'm thinking that will not preserve any event handlers that I'd set up for those controls. Is that right? In that case, I'd need to either re-wire up the event handlers as the user switches between calculations or do something else.
(In essence I think what I want to do is to be able to preserve a chunk of the dom (which hopefully includes jquery event handlers) but I don't write a ton of jquery and am I'm not sure how to approach that... I'm wondering if I could get the whole parameter section of a page represented as a jquery node, and save that off (to a js variable) and restore it, as needed, if that would do the trick??
Thanks for any ideas!
Michael
Honestly, usually it's easier just to hide()/ show() elements rather than removing them/ re-adding them.
Add a calculation-1 class to elements you want to be visible for the first calculation, and calculation-2 for the second calculation elements. This will let you get a jQuery variable of all calculation 1 and 2 elements via $('.calculation-1') and $('.calculation-2).
You can then add an event handler for the radio's that hide() and show() the elements accordingly.
If you use html(), you'll lose events bound to the elements children. Unless you attach your handlers to an ancestor which you don't remove.
You can also use detach(), which will remove the elements from the DOM, but persist the event handlers you added. However, if your elements are dotted all over the DOM, it's hard to track their origional position, and TBH is more effort than it's worth.

Events not always firing

I'm not really sure how to go with this, but here goes:
I have form elements that trigger a function (mainly for validation purposes). This triggers on click, on change etc. These are written with vanilla JavaScript.
If it's a straight-forward HTML element then everything works fine. E.g. a element fires on change.
However, if I use a jQuery script (e.g. a jQuery colour selector), then although that jQuery script populates an field, the validation script doesn't fire.
This I suppose is obvious as you don't click, blur, change it, it's just the jQuery script changing it.
Of course I could change the JavaScript in the colour selector jQuery script so it also fires the validation script, but there must be a better way where as well as on click, on change, on blur etc. I can also activate the function when it picks up that another script is changing it. I need this for various occasions and scripts.
Another example is a rating script (rate out of 5). It uses radio buttons as a non-jQuery fallback and the jQuery script just hides those radios (with CSS), displays the star images and then changes the radios when the user interacts with the star images. That way the server handles a form submit the same way regardless of the availability of jQuery. However, the validation script doesn't fire.
Any ideas?
Apparently the elements are being inserted on the dom after the javascript run.
try using $.live() instead of $.blur()
so even if this script elements are inserted after the page rendered, events will be bound to em.
http://api.jquery.com/live/

Trigger change of a checkbox made by javascript

I'm building a jQuery plugin to style checkboxes. I hide the real one and after it insert button which when clicked toggles the hidden checkbox. But if I check the hidden checkbox via JavaScript, fake button doesn't change of course. I thought about making it to change using jQuery's .change() but it also doesn't trigger the change when made by JavaScript and not by actually clicking the checkbox.
I want plugin to be universal and to also work if someone has a button like "check all" or "uncheck all" which does the thing with JavaScript, I want my fake checkbox-buttons to change accordingly.
The question is what method should I use instead jQuery's change() in order to watch not only changes made by mouse clicks, but also by javascript for example $('checkbox').prop('checked', true);
edit2:
I realized there is no proper way to watch properties with JavaScript, except checking the property several times a second for each checkbox which is very unattractive.I decided not to include such inefficient feature to my plugin and instead leave it to user to also trigger the change if he wants to manipulate values via JavaScript.
You can't watch properties. You could set up a timer that looks for changes every few milliseconds, but that is not satisfying.
Instead, you should rely on all other code to trigger the change event, when they want plugins like yours to update (there may also be cases when they don't):
$(':checkbox').prop('checked', true).change();
You need to trigger the change event manually.
$('#checkbox').attr('checked', 'checked').change();
Have a look at this :
JsFiddle

Categories