Why is this not working? How can I pass the caller object to a function?

Question

var submitbutton = $('#form_submit');
submitbutton.addClass('disabled');
$('#form_primer').on('keyup', validator(this));
$('#form_szek').on('keyup', validator(this));

function validator(event){
    if(isNaN(event.value)){
        $(event).css('border-color', 'red');
        submitbutton.addClass('disabled');
    }
    else{
        $(event).css('border-color', 'green');
        submitbutton.removeClass('disabled');
    }
  };

So, I have this javascript, and don't want to write the validator function twice. This script should disable the submit button and color the border red or green based on the input. How can I pass the form element to the function? Also, how can I disable the form submission properly? The button can't be pressed, but if the user hits enter with text inside, it will still submit it.

Avoid using `event` as a variable to refer your element in the event handler, it's dedicated for the event itself. — cнŝdk, Apr 13 '17 at 15:47

cнŝdk · Accepted Answer · 2017-04-13T15:54:42.567

You don't have to pass a variable to the event handler, you can access element directly using this keyword:

var submitbutton = $('#form_submit');
submitbutton.addClass('disabled');
$('#form_primer').on('keyup', validator);
$('#form_szek').on('keyup', validator);

function validator() {
  if (isNaN(this.value)) {
    $(this).css('border-color', 'red');
    submitbutton.addClass('disabled');
  } else {
    $(this).css('border-color', 'green');
    submitbutton.removeClass('disabled');
  }
};

Note:

Avoid using event as a variable to refer your element in the event handler, it's dedicated for the event itself.

Demo:

This is a working Demo:

var submitbutton = $('#form_submit');
submitbutton.addClass('disabled');
$('#form_primer').on('keyup', validator);
$('#form_szek').on('keyup', validator);

function validator() {
  if (isNaN(this.value)) {
    $(this).css('border-color', 'red');
    submitbutton.addClass('disabled');
  } else {
    $(this).css('border-color', 'green');
    submitbutton.removeClass('disabled');
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" id="form_submit">
<input type="text" id="form_primer">
<input type="text" id="form_szek">

Got it, its working, thanks ^^ Also, my other question: how do I stop a form from submiting on enter pressed? — Drake, Apr 13 '17 at 15:55
Sorry, I was thinking that THIS was supposed to be the outside context. My bad. — MyiEye, Apr 13 '17 at 15:56
@Drake you need to trgger `keyup` event on the `form` and use `e.preventDefault()` if Enter is pressed, take a look at : http://stackoverflow.com/questions/11235622/jquery-disable-form-submit-on-enter. — cнŝdk, Apr 13 '17 at 15:58

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Your function validator should be in function() {} of event.

Edit

Changed event var to object. Good point there @evolutionxbox

var submitbutton = $('#form_submit');
$('#form_primer').on('keyup', function() {
  validator(this)
});
$('#form_szek').on('keyup', function() {
  validator(this)
});

function validator(object) {
  if (isNaN(object.value)) {
    $(object).css('border-color', 'red');
    submitbutton.addClass('disabled');
  } else {
    $(object).css('border-color', 'green');
    submitbutton.removeClass('disabled');
  }
};

.disabled {
  border: 0;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="submit" id="form_submit">
<input type="text" id="form_primer">
<input type="text" id="form_szek">

The `event` variable is misleading. I know the name isn't yours, but it would be worth changing it. — evolutionxbox, Apr 13 '17 at 15:44

Why is this not working? How can I pass the caller object to a function?

2 Answers2

Edit