I have vars that look like this:
var cardholder = $("#cardholder");
var cardholderInfo = $("#cardholder-Info");
And a function (which doesn't currently work) that looks like this:
function validateRequired(field){
//if it's NOT valid
if(field.val().length < 1){
field.addClass("field_error");
fieldInfo.text("(Required)");
fieldInfo.addClass("error");
return false;
}
//if it's valid
else{
field.removeClass("field_error");
fieldInfo.text("");
fieldInfo.removeClass("error");
return true;
}
}
Which I access like:
cardholder.keyup(validateRequired(cardholder));
I've looked everywhere but I can't find what I need and I'm not really sure what I should be searching for.
I can use the field value to access the straight cardholder var. But I also want to use the field value to then reference cardholderInfo so I can manipulate that element in the function.
You would call the function like this, passing the second parameter:
cardholder.keyup(function () {
validateRequired(this, cardholderInfo);
});
And modify your function to take a second parameter:
function validateRequired(field, fieldInfo){
/* validation stuff */
}
No need for the global variables:
function validateRequired($cardInfo){
// You can guess what $cardInfo is
//if it's NOT valid
if(this.val().length < 1){
this.addClass("field_error");
$cardInfo.text("(Required)");
$cardInfo.addClass("error");
return false;
}
//if it's valid
else{
this.removeClass("field_error");
$cardInfo.text("");
$cardInfo.removeClass("error");
return true;
}
}
$(document).ready(function(){
$("#cardholder").keyup(function(){
validateRequired.call($(this),$("#cardholder-Info"));
});
});
Don't call the function you want to bind! If you need to pass an argument to it every time it is called, you either need to use bind or a function expression:
cardholder.keyup(functio(e) {
return validateRequired(cardholder, cardholderInfo);
});
Also you will need a second parameter in your validateRequired function to get the fieldInfo variable filled:
function validateRequired(field, fieldInfo){
…
You have to pass reference of function in keyup, you do not have to call function
cardholder.keyup(function(){
validateRequired(cardholder)
});
Related
so basically what i would like to ask you, when I use event listeners with function that has parameters why i can't use word this in function, this is an example for you, because i cant explain it properly.
var elUsername = document.getElementById('username');
var elMsg = document.getElementById('feedback');
function checkUsername(minLength){
if (elUsername.value.length < minLength){
elMsg.textContent = 'ur username must contain at least 5 chars';
}else {
elMsg = "";
}
}
elUsername.addEventListener('blur', function(){checkUsername(5)}, false);
------------------------------------------------------------
function checkUsername(){
var elMsg = document.getElementById('feedback');
if (this.value.length <5){
elMsg.textContent = 'usename must be 5 chars or more';
}else {
elMsg.textContent='';
}
}
var elUsername = document.getElementById('username');
elUsername.onblur = checkUsername;
so second example in function there is no parameter in if statement I can use this, but in first example i couldn't can some1 explain why is that?
That is because you are calling the checkUsername method from inside a anonymous function in your event listener, if you change
elUsername.addEventListener('blur', function(){checkUsername(5)}, false);
to
elUsername.addEventListener('blur', checkUsername, false);
and do the value check inside the function (like the second code example) it will work.
This happens because the scope of 'this' is not passed when you call checkUsername, this is possible, but that you'll have to call it with the .call() method. Like so:
elUsername.addEventListener('blur', function(){checkUsername.call(elUsername, 5)}, false);
Now the elUsername is passed as this to the checkUsername function.
Although i would prefer to directly call the checkUsername function and do your calculations from there.
A simplified explanation : they keyword this is available to any function that is owned by an object.
By doing :
elUsername.onblur = checkUsername;
You have attached your function to the object elUsername. So this will refer to the object elUsername but ONLY if the function is called using the onblur field : elUsername.onblur().
If you want to do the same on the first case, you can use the function call to force the value of the parameter this :
elUsername.addEventListener('blur', function(){
checkUsername.call(elUsername, 5)
}, false);
See https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/call
I have two functions. I want this function:
function indentSpace(s, n){
return ((new Array(n+1)).join(s));
}
To get it's parameters from this function, while allowing this function to continue:
function onHandle(line, report) {
var input = $.trim(line);
if (parensBalanced(input) == false) {
indentSpace('.',input.length);
controller.continuedPrompt = true;
} else if (parensBalanced(input) == true) {
controller.continuedPrompt = false;
if (doCommand(input)) {
report();
return;
}
...
}
}
So that the 1st function gets used here, as the value for continuedPromptLabel:
$(document).ready(function() {
controller = $("#console").console({
continuedPromptLabel: indentSpace,
completeHandle: onComplete,
});
});
I've tried it several different ways, and it seems that once I get a value for indentSpace, it also returns that value in its containing function - and breaks other stuff.
Cheers!
So you want indentspace to essentially have a closure on its parameters from being called asynchronously from onHandle, such that onHandle is running freely, but then you want that indentspace with those parameters to be used elsewhere? I don't think that's possible.
I want to pass one parameter to a function called ForPaste().
My function is given below:
var regex = /^[A-Za-z0-9ĀĒĪŌŪāēīōū\.\-\~\`\'' ]*$/;
var SalaryRegex = /^[A-Za-z0-9\,\.\/\$ ]*$/;
$.fn.ForPaste = function () {
return this.each(function () {
$(this).bind('input propertychange', function () {
var value = $(this).val();
if (!regex.test(value)) {
$(this).val("");
}
});
});
};
This function is in a common JS file. It is called on individual pages. I want to test the regex depending on the parameter passed. So can I know the method about to call the ForPaste() function with the parameter.e.g $("#Text1").Forpaste('FromForm1'); and I get this FromForm1 in the ForPaste() function.
You define a formal parameter for your function.
// formal parameter--v
$.fn.ForPaste = function (the_value) {
alert( the_value ); // displays the argument passed
// rest of your code
};
Whatever value was passed to ForPaste() will be referenced by the_value. (Of course you can change the name to any valid identifier.)
not sure what you are trying to do, because the answer seems so obvious. Will this do?
$.fn.ForPaste = function (theName) {
if (theName.test(//)){
return this.each(function () {
....
});
}
return false
};
you can access the parameters by looking at arguments which isn't an array, but seems to be one. from within the function you can do an var theName=arguments[0] to get the value of the first parameter
I can't seem to get back on track with this one. I simply put a function in a variable and want to call it later, providing it with a parameter:
var logic = function(itemId) {
console.log(itemId);
};
jQuery("#flipright").click(function() { logic.apply(1); } );
This prints "undefinded".
What am I missing?
Simply call logic(1).
If you want to pass a context, you can use call or apply :
logic.apply(context, [1]);
// or
logic.call(context, 1);
You should use apply or call if you want to pass a context to another function - meaning that the this keyword in the called function will refer to whatever context you are passing to it.
Here's a scenario :
var logic = function(itemId) {
console.log(this,itemId);
};
jQuery("#flipright").click(function() {
// output to console the current jquery object and "1"
logic.call(this,1);
});
Make it:
jQuery("#flipright").click(function() { logic(1); } );
ref for apply: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply
Let's say I have a function and one of the parameters is for the name of the target variable.. Would it be possible for me to send a variable to the function like this:
function otherfunction(input){
...
}
function test {target) {
var x = 1;
target(x);
}
test(otherfunction);
The problem I have is that I'm making a greasemonkey script and one of the variable I need can't be returned from the function due to a limitation.. So this would be the alternative. I just don't know how to get it to work.. Any help would be much appreciated!!
Your example (almost) works:
function otherfunction(input){
alert(input);
}
function test(target) {
if(typeof target !== 'function') {
alert('target is not a function!');
return;
}
target(1); //invokes the passed-in function, passing in 1
}
test(otherfunction); //alerts 1
//You can also do it with an anonymous function too:
test(function(arg) {
alert(arg * 5);
}); //alerts 5
jsFiddle example