We Keep Coding

Is it possible to call a method from a class in an HTML event like 'onblur'?

I got a little problem that I can't solve...
I usually check my form like this:
function checkFirst(field) {
if (field.value.length < 2 || !regLetters.test(field.value)) {
//do something
} else {
//do something else
firstNameOk = true;
}
}
and on the HTML side with onblur="checkFirst(this)".
Now I'm using OOP and I can't use my methods in onblur and I don't know how I could call the class in the onblur HTML attribute...
I already got a solution to work around this without using onblur in HTML and in my case I'd like to know if it's possible or not.
Anyone to help me please?
Edit:to avoid people telling me to use addEventlistener i show you my solution that works fine but not the one i wanted to use...
this.data.forEach(item => item.addEventListener('blur', function () {
console.log(item.id)
// check first name field //
if (item.id === "first") {
if (item.value.length < 2 || !this.regLetters.test(item.value)) { // if this field length =
this.highlightField(item, true);
} else {
this.highlightField(item, false);
this.errorMessagesReset(item);
this.firstNameOk = true;
}
// check last name field //
} else if (item.id === "last") {
if (item.value.length < 2 || !this.regLetters.test(item.value)) {
this.highlightField(item, true);
} else {
this.highlightField(item, false);
this.errorMessagesReset(item);
this.lastNameOk = true;
}
// check email field //
} else if (item.id === "email") {
if (item.value.length < 2 || !this.regmail.test(item.value)) {
this.highlightField(item, true);
} else {
this.highlightField(item, false);
this.errorMessagesReset(item);
this.emailOk = true;
}
// check textarea field //
} else if (item.id === "message") {
if (item.value.length < 1 || item.value > 100) { // if length of item is sup or equal to 1 and
this.highlightField(item, true);
} else {
this.highlightField(item, false);
this.errorMessagesReset(item);
this.messageOk = true;
}
}
}.bind(this))); ```

It should be a static function that belongs to the class then. That way you can call it directly.

how to make alerts appear if the number of infant is more than adults

I want to make the alert appear if the number of infant is more than adults.
I've tried but it looks like something went wrong.
Please help.. thanks before
ex: http://jsfiddle.net/pBxfX/132/
var button = $('#submit'),
adult = $('#adult option:selected').val(),
infant = $('#infant option:selected').val();
if(adult > infant) {
$("#alert").hide;
}
else if(adult == infant) {
$("#alert").hide;
}
else {
$("#alert").show;
}

A few things:
You need to treat hide and show as methods (call them as .hide() and .show())
You need to execute your checking code in the change event handler for the select.
When comparing adults to infants, you need to treat them as integers (they are currently being treated as strings).
See http://jsfiddle.net/pBxfX/133/ for updated code
var button = $('#submit');
$(document).ready(function() {
$(button).attr('disabled', true);
$('input[type="text"]').on('keyup', function() {
var from = $("#from").val(),
to = $("#to").val();
if (from != '' && to != '') {
$(button).attr('disabled', false);
} else {
$(button).attr('disabled', true);
}
});
// Run code when any <select> changes
$("select").on('change', function() {
var adult = parseInt($('#adult option:selected').val()); //convert to integers for comparison
var infant = parseInt($('#infant option:selected').val()); //convert to integers for comparison
if (adult > infant) {
$("#alert").hide(); //Note that it is .hide() not .hide
} else if (adult == infant) {
$("#alert").hide();
} else {
$("#alert").show();
}
});
});

hide() and show() are functions so you need to add () to call these functions.
if(adult > infant) {
$("#alert").hide();
}
else if(adult == infant) {
$("#alert").hide();
}
else {
$("#alert").show();
}

How do I use the JQuery toggle ability to toggle the visibility of a group of rects?

I am using this function to show and hide objects. I think the reason why this isn't working is because I am not selecting the object correctly.
function generalHideOrShow(element)
{
if (element instanceof Element)
{
//single element passed
element = [element]; //mimic node list
}
if(element.length && element.length > 0 && element[0] instanceof Element)
{
//node list
for (var i = 0; i < element.length; ++i)
{
if (element[i].getAttribute("data-hidden") == "true" )
{
$(element[i]).removeClass("hidden");
element[i].setAttribute("data-hidden", false);
}
else
{
element[i].setAttribute("data-hidden", true);
$(element[i]).addClass("hidden");
}
}
}
else
{
return false;
}
}
d3.selectAll("#button1").on("click", function(){
generalHideOrShow($("#buttonsRight")); //selection
});
var buttons = d3.select("#svg").append("g").attr("id", "buttons");
var buttonsRightTop = buttons.append("g").attr("id", "buttonsRightTop");
var buttonsRight = buttonsRightTop.append("g").attr("id", "buttonsRight");
I wish to select 'buttonsRight' as above.
When I change it to select all 'div' tags to test it, it works.
generalHideOrShow($("div")); //selection
I have tried different ways of selecting it such as :
generalHideOrShow($(buttonsRight)); //selection
generalHideOrShow($(".buttonsRight")); //selection
generalHideOrShow($("g#buttonsRight")); //selection
None are working. How do I select this right side buttons ?

Since you are using jQuery, I think you can write it as
function generalHideOrShow(element) {
var $elem = $(element);
if ($elem.length) {
var $hid = $elem.filter('[data-hidden="true"]').removeClass('hidden').attr("data-hidden", false);
$elem.not($hid).addClass('hidden').attr("data-hidden", true);
} else {
return false;
}
}

This is how I managed to do it:
Call the generalHideOrShow Function with the onClick:
d3.select("thisButton").on("click", function(){
generalHideOrShow("#buttonsRight");
}
set the class to visible first so you can check the class later:
buttonsRight.classed("visible", true);
Then do if statements to check if the class is hidden or visible
function generalHideOrShow(element) {
console.log(element[0].getAttribute('class'));
if(element[0].getAttribute('class') === "visible"){
element[0].setAttribute('class', "hidden");
} else{
element[0].setAttribute('class', "visible");
}

Filtering inputs by value

I have HTML construction like this
<div class="qn-block">
<input type="text" class="quantity-number" name="quantity-number" value="2" />
Refresh
</div>
For inputs with value > 1 i have to disable ".refresh-q". For inputs with value = 1 disable ".refresh-q" and ".remove".
How can I achieve this?

In order to disable an anchor you could define a click handler which returns false:
function disableAnchor() {
return false;
}
But you could also hide it or whatever.
and then:
$('.quantity-number').each(function() {
var value = parseInt($(this).val(), 10);
if (isNaN(value)) {
return;
}
if (value > 1) {
$(this).siblings('.refresh-q').addClass('disabled').click(disableAnchor);
} else if (value === 1) {
$(this).siblings('.refresh-q, .remove').addClass('disabled').click(disableAnchor);
}
});

Try this. You cannot disable a link, so I have simply hidden them. There are alternatives to simply hiding the element, such as removing the A element completely, or returning false when clicked, if you'd prefer to use those instead.
$(".quantity-number").change(function() {
var val = $(this).val()
if (val = 1) {
$(this).siblings(".refresh-q, .remove").hide();
}
else if (val > 1) {
$(this).siblings(".refresh-q").hide();
}
});

problem in run some js codes after click

why after search and click on result search and click on plus(button add input) in the example on part Adding input, Date formating($('.find_input').delegate('input.date:text', 'keyup', ....) and normal number formatting($('.find_input').delegate('input.numeric:text','keyup',...) not work.
EXAMPLE: http://www.binboy.gigfa.com/admin/tour_foreign/insert_foreign
Js full code: http://jsfiddle.net/ZpDDR/
...
///// Date formating /////////////////////////////////////////////////////////////////////////////////////////
$dateSet = 0;
$monthSet = 0;
$yearSet = 0;
$('.find_input').delegate('input.date:text', 'keyup', function () {
$val = $(this).val().replace(/[^\d]+/g, "").match(/\d{1,12}$/);
if($val == null) {
return;
} else {
$val = $val.join("");
}
if($(this).val().match(/\d{4,}$/) && $val.length%2 == 0) {
$val = $val.match(/\d{2}/g);
if($yearSet < $monthSet) {
if($val.length == 4) {
$(this).val($val.join("").replace(/(\d{2})(\d{2})(\d{4})$/,'$3/$1/$2'));
$yearSet++;
} else if($val.length == 6){
$(this).val($val.join("").replace(/(\d{4})(\d{2})(\d{2})(\d{4})$/,'$4/$2/$3'));
$yearSet++;
}
} else {
if($monthSet < $dateSet) {
$(this).val($val.join("").replace(/(\d{4})(\d{2})(\d{2})(\d{2})$/,'$1/$4/$3'));
$monthSet++;
} else {
if($val.length == 2) {
$(this).val($val.reverse().join("/"));
$dateSet++;
$monthSet++;
} else {
$(this).val($val.join("").replace(/(\d{4})(\d{2})(\d{2})(\d{2})$/,'$1/$2/$4'));
$dateSet++;
}
}
}
}
});
///normal number formatting/////////////////////////////////////////////////////////////////////////////////////////
$('.find_input').delegate('input.numeric:text','keyup',function () {
$val = $(this).val().match(/[0-9]/g).reverse().join("").match(/[0-9]{1,3}/g).join(",").match(/./g).reverse().join("");
$(this).val($val)
});

The problem is that the element that you're delegating from,.find_input, doesn't exist yet when you're setting up the delegation function. delegate allows for defining event handlers for elements that aren't created yet, but only elements that match the second selector E.g., $('#must-exist-now').delegate('.can-be-created-later', ...);
I'm not sure if I described that well, but the solution is to change your statement to delegate from something that already exists on DOM load. For example: $(document).delegate('input.date:text', ...).