garygreen / dominar

Lightweight bootstrap validator inspired by Laravel
http://garygreen.github.io/dominar/
22 stars 4 forks source link

numeric value treated as string #1

Closed stocksp closed 9 years ago

stocksp commented 9 years ago

here is my input <input type="number" name="number" class="form-control"> here is my rule number: { rules: 'required|max:10' }

The required works as does 'integer' if I include it. max:10 is treated as if the input is a string and generates an error when typing in the 11 digit. "The number must be less than 10 characters."

Stepping into the check function I see inputValue is a string and is validated as such. var inputValue = this.input[attributeToValidate];

garygreen commented 9 years ago

Thanks for reporting the issue. It's an issue upstream in validator.js, once fixed there should be able to bower update and have it work (as long as you have the integer rule as well, because then it knows to validate it as a number and not by it's length).

Leaving this open for now until fixed

garygreen commented 9 years ago

If your looking for a quick fix for this (while it's being fixed in upstream) you can customise the data, forcing it into a numeric type before it get's validated so it will be compared as a numerical value, not based on string length. Just supply a validatorOptions callback function like:

var validator = new Dominar($('form'), {
    age: {
        rules: 'required|min:18',
        validatorOptions: function(options) {
            options.data.age = parseFloat(options.data.age, 10);
            return options;
        }
    }
});

When it's fixed upstream you'll be able to do:

var validator = new Dominar($('form'), {
    age: {
        rules: 'required|integer|min:18'
    }
});

Keyword being integer which tells it to compare it as numeric value, not based on min character length.

stocksp commented 9 years ago

thank you! Could I trouble you for a couple of other 'things' that don't seem obvious to me.

How do I determine if the form is valid (or a particular input) ..say to enable/disable the submit button? How do I force a validation on the form (I present a prefilled out form as a suggestion to the user .. with a couple of fields that require input and I want them to show the error messages)?

garygreen commented 9 years ago

Determine if form is valid:

var validator = new Dominar($('form'), {
    username: {
        rules: 'required|min:3'
    }
});

validator.validateAll(function() {
    // Form is valid
}, function() {
    // Form is invalid
});

Validate form manually

validator.validateAll();

Validate specific field manually (by name)

validator.getField('username').validate();

Validate specific field manually (by element)

validator.getField($('[name=username]')).validate();

Determine if particular element is valid:

validator.getField('username').validate(function() {
    // Field is valid
}, function() {
    // Field is invalid
});

Note: the above will trigger validation and show error messages etc. Will look into the ability to determine if valid/invalid without triggering UI stuff.

stocksp commented 9 years ago

Having the submit button disabled when the form is invalid is a necessity (for me!) ...

garygreen commented 9 years ago

Well it does prevent form from submitting if it's invalid... it just doesn't add a 'disabled' state onto the button.