garygreen / dominar Goto Github PK

Remote requests fire even if previous validations in the chain fail, e.g. in
rules: 'required|email|username_available'
even if email fails,username_available fires a request to server anyway, which stresses the server needlessly.

Files in dist/ folder are not up-to-date, which will trip people up when trying to make Dominar work according to documentation (e.g. on async validations, dist files miss Dominar.Validator, constructor parameters are different, etc.)

disableSubmit -- would disable the :submit button if validation is failing.

Abstract the styling out and ability to switch the validator to using a new framework:

• Foundation
• Semantic UI
• Pure

Acts a bit strangely at the moment. Work on supporting radios and checkboxes.

I thought that this would work

password: {
      rules: 'required|min:4'
 },
 passwordConfirm: {
      rules: 'required|confirmed:password'
 }

The above never validates ... always generates a required error or 'The passwordConfirm confirmation does not match.'
The confirmed method in Validator (line450) always fails as it seem to be looking for a property with the name of my control (in this case 'passwordConfirm' ) plus a '_confirmation' appended to it. Which doesn't exist.
Nothing in the this context even has the value of the password control .... so I'm confused about how to use the 'confirmed' built in validator.

• $el.attr('novalidate', 'novalidate')
• el.checkValidity

Instead of:

first_name: {
    rules: 'required'
}

Allow for

first_name: 'required'

Useful when no custom options are needed.

• Lookover files and simplify api, private methods with _
• bindEvents
• trigger
• fireValidate
• fireSubmit
• getName
• getTrigger
• $form
• getMessageElement
• getFeedbackElement

var dominar = new Dominar(form, {
   full_name: {
     rules: 'required'
   }
}, {
   fields: {
      feedback: false
   }
});

This will apply feedback false to all the fields, except for ones that have it explicitly set.

In the readme file the documentation for the registerAsync method is the following

Dominar.Validator.registerAsync('username_availability', function(username, attribute, parameters, passes) {.....}

I would like to pass some parameters to the newly registered method (username_availability in this example).
The parameter I want to pass is not a static one, such as min:3, instead it will be a dynamic value, for example additional info about the current user.

I was thinking to something like this, but it's not working. The user.email value is not passed:

fieldA { rule: 'username_availability:' + user.email }

Can you please explain me how I can do that, if possible ?
thx

Especially useful for remoteRule so it won't fire new requests if value was already validated and hasn't changed.

Async rules fail and show "success" even if they get 200 OK from the api

        Dominar.Validator.registerAsync('username_taken', function (username, attribute, parameters, passes) {
            $.get(url, {username: username}, passes)
                .fail(function (response) {
                    passes(false, response.responseJSON.message);
                });
        });

Instead of having to do:

fname: {
    customAttributes: {
      fname: 'First Name'
   }
}

Allow for:

fname: {
    customAttributes: 'First Name'
}

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];

Will include the value from the given fields when passing onto the validator. Useful for "chained" type validation, and the confirmed rule.

<input name="latitude" type="hidden" value="56.384539">
<input name="latitude" type="hidden" value="56.384539">

<form>
    <div class="form-group">
        <label>Enter your location and select from dropdown menu.</label>
        <input name="location" type="text" value="London, UK">
    </div>
</form>

Dominar.Validator.register('geolocation', function() {
    return this.input.latitude.length && this.input.longitude.length;
}, 'Please enter a valid location.');

var dominar = new Dominar($('form'), {
    location: {
        rules: 'required|geolocation',
        includeValues: ['latitude', 'longitude']
    }
});

First Thank a million for your work here!

Could I trouble your for an explanation of delay vs delayTriggers. I don't see an example of delayTriggers?

I would like an email validator to be as unaggressive as possible but still be a little more aggressive than just a change. With a real long email '[email protected]' , the validator will keep nagging the user until they get to the 'o' in com.

I'm using

email: {
    rules: 'required|email',
      triggers: ['keyup', 'change', 'focusout'],
      delay: 1000
}

and it helps a lot ... but thought maybe there is a better way for this case, maybe delayTriggers. That is keyup would be slow, but change would be fast.

P:)

• don't fire any events, highlighting, etc
• simply determines if field is valid
• support async by passing a callback

Useful if you want to build a list of rules manually with validatorOptions.

Example, field 'b' is required when a is present. The proposed required_with rule in validatorjs would help as well.

var validator = new Dominar($('form'), {
    a: {
        rules: 'required'
    },
    b: {
        validatorOptions: function(options) {
            if (this.getField('a').getValue().length) {
                options.rules = 'required';
            }
            return options;
        }
    }
});

The framework I'm using (Meteor) can remove controls after Dominar has been told about them.
Not hide them, but take them out of the DOM.
I believe Angular and React do the same.

Dominar::validateAll is not happy about fields not being there.

I hacked in a

if(!field)
  continue

inside the for loop and everything appears to be working fine.
Am I asking for trouble doing this?

Might be a good idea?

<input type="text" name="username" data-dominar="required|alpha">

I replaced brand x validator with dominar.
the validations works great.
Unfortunately,
my submit event is always called with the event object returning true for
isDefaultPrevented();

Here is what I see in dominar when I click my form Submit button;
fireSubmit is called and we get to line 688
callback at line 647 fires which calls line 681
preventDefault() is called and then validateAll
next 683 ('submit-passed') is called
at this point isDefaultPrevented() still returns true.
continuing in the debugger your line 647 is called (again).

the function submitPassed is called() we get a couple more trigger events at 650 and now my submit handler is called.
and isDefaultPrevented() returns true. Which is not good.

What is strange is that the default event handle is still called. despite anything I do to stop it.

for 'fun' I put

if (!event.isDefaultPrevented()) {
      event.preventDefault();
 } else {
      event.preventDefault();
}

at that top of my submit. and the default submit handler is still called.

My stuff is pretty basic and don't have anything strange going on ... I hope. Changing back to brand x branch and submit behaves normally ...

P:)

update:

add this to your dominar demo and you will see the same problem.

$(document).ready(function(){
   $('#basic-demo-form').on('submit', function(e){
    e.preventDefault();
    console.log('submit handling here!');
   });
});

Waiting on validatorjs 2.0.

If 'first' is used as the name attribute like:
<input name="first" type="text" class="form-control"/>
Dominar gets confused and we crash in line 815

validate.reject(this.validator.errors.first(name));

with 'first' as the name, errors becomes an array which doesn't have a first method.

Very easy to see in your demo.. Just change 'userName' to 'first' and you get the error.

I think it would be helpful if dominar would also have something like dominarValidationPassed / dominarValidationFailed events even without submitting the form, so that users could e.g. disable action buttons if the validation didn't pass.
Or maybe this could be achieved in some other way?

Waiting on validatorjs 2.0.

A linked field will automatically validate if it's linked field has a value.

Useful for same and confirmed rule when validating passwords are the same, email addresses, etc.