jonjamz / blaze-forms

Dead easy reactive forms with validation (Meteor).
https://atmospherejs.com/templates/forms
MIT License
113 stars 11 forks source link

input type = checkbox #74

Closed vanhumbeecka closed 9 years ago

vanhumbeecka commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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

vanhumbeecka commented 9 years ago

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

zachariahtimothy commented 8 years ago

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'));
    }
});