This project is archived and is in readonly mode.

#501 open
Aicke Schulz

Form.Validator improvements ideas (two new events and validators)

Reported by Aicke Schulz | February 1st, 2011 @ 04:09 PM | in (closed)

I've the following improvement ideas for Form.Validator.

  • evaluateOnStopTyping: When the user is typing and has stopped typing for longer then a second (or less).
  • evaluateOnSubmitHover: When the user hovers over the submit buttons, because in general the last form field does not fire an onblur.

Dont know if the following is possible with password fields without logging keypresses.

  • validator-password: Check if a password is long and complex enough. I would like to get a complexity rating as callback or as css-class on the element, so i can style an indicator. After looking at the custom validator example I've seen there is nothing similar included yet, only true or false. So this seems to be alot of work.
  • validator-password-check: Check if the password is the same as the one entered in another password field. Usually for password double checking of new passwords, so no database password checking needed.

Comments and changes to this ticket

  • Arian

    Arian February 1st, 2011 @ 05:17 PM

    • State changed from “new” to “open”
    • Milestone set to
    • Assigned user set to “Aaron Newton”
    • Milestone order changed from “197558” to “0”

    Thanks for the ideas, I'm not really involved or familiar with Form.Validator, but hopefully Aaron has some time and likes the ideas. In case you think you could fix it yourself, that would be really awesome and any pull request is appreciated of course!

  • Tim Wienk

    Tim Wienk February 2nd, 2011 @ 11:55 AM

    • Tag changed from 1.3, events, form, form.validator, idea, improvement, mootools-more, validator to form, form.validator, password, submit, validator

    evaluateOnStopTyping: Something to consider, but as you pointed out yourself on IRC, it may be annoying and therefore bad practice.

    evaluateOnSubmitHover: Blur does fire:

    validate-password-strength: Rather interesting, we should probably discuss possibilities, "strength" may be a bit subjective, though.

    validate-password-check: We have validate-match for that.

  • Aicke Schulz

    Aicke Schulz February 2nd, 2011 @ 03:30 PM

    I've coded a solution for evaluateOnSubmitHover and renamed it to evaluateOnButtonHover because the "problem" exists with all buttons / input buttons not only the submit button.

    I don't have used GitHub before, don't know how I do a pull request and have low time at work extending MooTools. That's why I'll post the differences as a comment here, I hope it is understandable.

    The complexity could be dropped a bit by removing the support for document.activeElement (is supportet by IE and most modern browser versions) or getFocusElement could be a function of the form object. Feel free to change or optimize it.

    Form.Validator = new Class({
    options: {
     evaluateOnButtonHover: true,
    initialize: function(form, options){
     this.focusElement = null;
     if (this.options.evaluateOnButtonHover) this.watchButtons(this.element.getElements('button, input[type="button"]'));
    getFocusElement: function() {
     var element = null;
     if (document.activeElement) {
      element = this.element.getElement(document.activeElement); // check if the activeElement is inside the active form
     } else {
      element = this.focusElement;
     return element;
    watchButtons: function(buttons){
     var self = this;
      el.addEvent('mouseenter', function(event) {
      var focusElement = this.getFocusElement();
      if (focusElement != null)
       this.validateField(focusElement, true);
    watchFields: function(fields){
      if (this.options.evaluateOnButtonHover && !document.activeElement)
       el.addEvent('focus', function(){ this.focusElement = el; }.bind(this));
      if (this.options.evaluateFieldsOnBlur)
       el.addEvent('blur', this.validationMonitor.pass([el, false], this));
      if (this.options.evaluateFieldsOnChange)
       el.addEvent('change', this.validationMonitor.pass([el, true], this));
     }, this);
  • Aaron Newton

    Aaron Newton February 2nd, 2011 @ 05:55 PM

    First, it's important to note that MooTools is generally speaking highly extensible so you should be able to implement all this stuff for your own use even if we don't adopt it.

    evaluateOnStopTyping: Note that the validate method is something you can call directly; this is something you could easily implement for your own extension. I would probably rather implement a method that would make an input fire it's change event if you stop typing which would potentially be useful in broader circumstances than the form validator. If we did that then you could create a FV instance and then invoke that method on the inputs and you'd have it.

    validate-password-strength: The subjective nature of this is hard for us to capture. The fact that validators are easy for users to author means that you can decide for yourself what a 'strong' password is. I don't think we could do this generically.

    If you'd like to give a shot at implementing a Element.fireChangeOnStopTyping method, perhaps with a better name than that, I'd consider including it. Then it's a small change to add the feature to FormValidator to use it.

  • Arian

    Arian February 2nd, 2011 @ 07:58 PM

    Probably you can use the new :pause pseudo event I pushed yesterday. That event fires (in case of a change event) when the user has not typed for a certain time.

    element.addEvent('change:pause(1000)', function(){
        // some stuff ...

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

The MooTools Extensions