We Keep Coding

jQuery validate not binding to keyup events [duplicate]

This question already has answers here:
onkeyup and onfocusout is not working in jQuery Validate
(1 answer)
jQuery validate plugin: validate on blur() by default
(1 answer)
Closed 5 years ago.
I'm making a "contact me" page, with jQuery validation. My main content box is reloaded with ajax to change content when the user clicks on a new page. The problem I'm having now is to bind an event handler for the validate function. what I got now is
$(document).ready(function(){
$('body').bind('focus focusout keyup', function() {
$('#contact_me').validate({
But it's not working like intended. I have to start typing, then click out of the input field and then click on it again before it starts to validate the input field value. I want it to validate on focus, focusout and keyup. I think the problem is with the event handler somehow. Any suggestions?
Here is a JSfiddle with the script: https://jsfiddle.net/z6h9d028/4/
I can see now that the eventhandler is not the problem. When i type in a input field its not validating the value until i click out of the box. After the first validation i works on keyup as well. How can i get i to work on keyup stright away?
Edit 2:
Updated fiddle: https://jsfiddle.net/z6h9d028/7/
It's almost working now! I just need to get all the error messages to show when clicking the submit button. And to find a way to show the error message when you type one character and then remove it if the input field is required (it does show it if you type once, then remove, type again and remove. but not the first time)

You don't need to set your own event listeners, or at least if you do, you shouldn't be using them on the .validate() method (see alternative method below).
Remove the whole $('body').bind() part, and add the following to your validate settings object:
onkeyup: function(element) {
$(element).valid();
// As sparky mentions, this could cause infinite loops, should be this:
// this.element(element);
},
This should be better too, as it may give you some extra freedom as to how you handle the onkeyup events, such as adding a setTimeout if you don't want it to be instantaneous.
Fiddle: https://jsfiddle.net/z6h9d028/5/
Inside the onkeyup, you can also call $('#contact_me').valid(), which will revalidate the whole form, although that may not be your desired outcome.
Edit: Sparky also helpfully mentioned that jquery-validate by default does allow keyup events, but it only does so after the first submit: jQuery validate plugin: validate on blur() by default
An alternative way would be to set the details of your validation as you currently are, without the onkeyup function, then set your own listeners and run $(element).valid():
$('#contact_me').validate({
rules: {
// ...
}
});
$('input').on('focus focusout keyup', function () {
$(this).valid();
});
Edit regarding your other issues:
Your errorPlacement function is doing some funky things. How it decides what is the next sibling or not seems to be working incorrectly. Also, you're adding the error HTML divs into your DOM manually, but they are actually generated by the plugin. So really, you're creating both, then trying to show them, kinda over-riding the plugin, kinda not, and the whole thing is going into a frenzy.
The solution is, I reckon, to remove those error divs, remove that errorPlacement function, and then modify the CSS selectors to get any id ending with "-error", which is what the plugin generates. So [id$='-error'] instead of .error_message
https://jsfiddle.net/z6h9d028/8/

Trigger text cursor programmatically like user actually clicked input tag

I'm trying to input some value into text field using javascript like Gmail email input tag.
But the problem happened with some of the fancy animations for their placeholder bind to some events that I don't know how to trigger, like images show below:
Input tag without focus/select:

Input after input something there:
Input tag with focus/select:
Then after I assigned the value, my value and the fancy placeholder will overlap each other.
I tried multiple ways, focus/select/click/both, nothing works. So I'm thinking if I can trigger that animation like user actually click it then assign the value to it may work.
How can I achieve this? or is there any other way to let that animation or their input check code capture my assigned value, so after that placeholder won't come down and overlap my value?

I'm not sure how you built you input, so there might be an easier way to handle it.
Because I personally use JQuery I would do it with the .toggle() function.
$(element).toggle();
You can also change the css attributes with the .css() function. Just create an on focus event and change the color etc in there.
Hope that was there you asked for.
Good luck :)

You can use focus and focusout from jQuery and toggle the classes with removeClass and addClass.
For example, you can do it like this :
$("input").focus(function(){
$(this).parent().addClass("is-active is-completed");
});
$("input").focusout(function(){
if($(this).val() === "")
$(this).parent().removeClass("is-completed");
$(this).parent().removeClass("is-active");
})
You can also use the materialize css's input.

How to trigger keyup() while using autocomplete()

I would like to change the first letter of a word to uppercase. So, I have written some code on keyup() function.
Whenever I type inside the text filed, Word's first letter is getting changed to uppercase.
I also use autocomplete() function. The problem is, Whenever I choose a word from autocomplete drop down it's first letter is not getting changed to uppercase and also the last text box is getting auto focused.
FYI: I am triggering the keyup() function after the autocomplete selection.
jsfiddle: http://jsfiddle.net/8ke04mgs/5/

You can use change event on your textbox
$(document).on('change', 'inputBox', function() {
// Does some stuff and logs the event to the console
});
This will solve the autocomplete problem

Your current way of doing things would work perfectly if the select method you provide to the autocomplete library was called after value of the box was updated.
But it is not, it's called before and so the value that it capitalises is the old value and is immediately replaced by autocomplete anyway.
As #Alok has pointed out, you can use the 'change' event to wait a little longer.
To avoid writing out your event handler out twice, remember .on() can take multiple events, so I'd just call it on keyup and change like so
$('#element').on('keyup change', function() {
...
});
But I think in modern browsers 'change' should be enough.

When user types into HTML <input/> where is that data stored?

I am writing a jQuery script that needs to work with an existing unchangeable plugin. This plugin listens for text being typed into an <input type='text'> and then processes the result. I can't alter this. My script is setting the text of the input via $('#display).val(newValue); as a jQueryUI Slider is dragged. I need the plugin to recognize this value as being typed by the user so that it processes the newValue as the slider is dragged.
Can anyone point me in the write direction for this?

You probably need to 'trigger' the keyup (or keypressed?) event so that the event handler is fired.
Here is one (slightly dirty) way to do it:
var e = jQuery.Event("keyup");
e.which = 50; // # Some key code value
$("#display").trigger(e);
Note that the plugin may be looking for particular keys, and I may have guessed the event wrong.
The more sophisticated way to do it would be to track down the plugin's event handler, and then invoke it directly. FireBug may help you find it by step-through debugging. Otherwise, you can use jquery to start inspecting the input's event handlers.
var events = $('#display').data("events");
jQuery.each(events, function(key, handlerObj) {
console.log(handlerObj); // alert(handlerObj);
});
Once you've found the relevant handler, you can invoke it directly.
HTH

You have to put an Onchange listener to the text field and trigger the necessary function to listen to onchange values of the user. eg:
function func(){.....put your logic.....}
If you are looking at reading value from a text field on changing a slider, then you have to put the necessary function on the slider control.

jQuery capture all changes to named input on a form

I'm trying to determine when any of a set of named input/select/radio/checked/hidden fields in a form change.
In particular, I'd like to capture when any changes are made to fields matching jQuery's selector $("form :input"), and where that input is has a name attribute. However, the form isn't static i.e. some of the fields are dynamically added later.
My initial thought is to keep track of when new named elements matching :input are added, and then add an event handler, like this:
function on_change() {
alert("The form element with name " + $(this).attr("name") + " has changed");
}
function reg_new_e_handler(input_element) {
input_element.change(on_change);
}
However, I'm quite hopeful I can avoid this with some jQuery magic. In particular, is there a way to register an event handler in jQuery that would handle input elements that match the following:
$("form :input").filter( function () { $(this).attr("name") } ).change(on_change);
However, have this event set update whenever new input elements are added.
I've thought that it may be possible to capture keyup event on the form node with $("form").keyup(on_change), but I'm not so sure how one could capture change events.
I'd also like this to capture keyup events.
Thank you for reading.
Brian

You're looking for live events.
For example:
$(':input[name="something"]'.live('change', function(e) {
//Do things
});
Adding an event handler using .live will handle the event for all elements that match the selector, no matter when they were added.