input type = checkbox

[vanhumbeecka]

I consider a checkbox to be of type Boolean. However, the code doesn't work that way.

So my question is: How to handle input elements of type 'checkbox' in this templateforms framework?

[jonjamz]

It's very simple. See the example here for registering a custom form element:

https://github.com/meteortemplates/forms#reactiveformscreateelement

The HTML element is in the first argument of validationValue (which is your chance to transform the value of what's in the DOM into any data type/structure you want, including a Boolean, before it is sent to be validated). The logic required would be simple and once you write it, the checkbox form element can be reused.

[vanhumbeecka]

awesome. I didn't read that piece at documentation at first, but now it works. For referencial purpuses, here is the code I used:

ReactiveForms.createElement({
    template: 'onoffswitchElement',
    validationEvent: 'keyup',
    validationValue: function(el, clean, template) {
        value = $(el).is(':checked');
        return value;
    }
});

Thanks for the quick response.

[johngonzalez]

Here my code including click event

ReactiveForms.createElement({
  template: 'basicCheck',
  validationEvent: ['keyup', 'click'],
  validationValue: function (el, clean, template) {
    console.log('Specifying my own validation value!', $(el).is(':checked'));
    value = $(el).is(':checked');
    return value;
    //return clean(value, { removeEmptyStrings: false });
  }

[vanhumbeecka]

Actually, I noticed that this validation for a checkbox doesn't really matter. It just needs to return a boolean, but you can't rerun this function to check the ACTUAL value of the checkbox. So, returning a random boolean (true or false, makes no difference) is all that matters. If you want to do some validation whether you may be able to tick it, you have to write that piece of validation code somewhere else.

ReactiveForms.createElement({
    template: 'onoffswitchElement',
    validationEvent: 'keyup',
    validationValue: function(el, clean, template) {
        var v = $(el).val();
        if (v === 'on') { // input of type checkbox always returns true, whether it is ticked or not
            return true;
        }
        throw new Meteor.Error("validation value incorrect.")
    }
});

[jonjamz]

I think your problem is that your validationEvent is for keyup, not for click. So it might not rerun?

[vanhumbeecka]

@jonjamz you're totally right. Adding the click event made all the difference. Now it is being rerun.

[zachariahtimothy]

I did something similar to @VanHumbeeckA . When my page loads, and I change the checkbox, all works as expected. So checkbox off, I select it and save, form saves correctly, then I turn if off again, and it does not get recognized as a changed field in my action function. Any idea how to get this to change? Here is my code

ReactiveForms.createElement({
    template: 'mdInputCheckbox',
    validationEvent: 'change',
    validationValue(el, clean, template) {      
        return clean($(el).is(':checked'));
    }
});