Building Valdr custom validator

Question

I have been trying since to build a custom validator using Valdr AngularJs plugin with no success.

What I want to archive is an input text that should receive date and time format like : dd/MM/yyyy hh:mm (12/04/2015 12:32:10)

Based on Valdr documentation, this is what I have done so far :

---

myApp.factory('customValidator', function () {
  return {
    name: 'customValidator', // this is the validator name that can be referenced from the constraints JSON
    validate: function (value, arguments) {
       // value: the value to validate
      // arguments: the validator arguments
      return value === arguments.onlyValidValue;
    }
  };
});

myApp.config(function(valdrProvider)
    {
        valdrProvider.addValidator('customValidator');
        valdrProvider.addConstraints(
            {
                'Person':
                {
                    'date_send':
                    {
                        'customValidator':
                        {
                            'onlyValidValue':'^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2})$|^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2}\s([0-1]\d|[2][0-3])\:[0-5]\d\:[0-5]\d)$',
                            'message': 'Please date and time format has to be : 12/04/2015 12:32:10'
                        }
                    }
                }
            });
    });

Then in my form, I have the following :

<input class="input" name="date_send" id="date_send" type="text" ng-model="date_send" />

But it doesn't work.

I will appreciate any help.

Thank you !

Answer 1

If you only need a regex validator, I'd recommend to use the one provided by valdr instead of writing a custom validator:

valdrProvider.addConstraints({
    'Person': {
      'date_send': {
        'pattern': {
            'value': '^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2})$|^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2}\s([0-1]\d|[2][0-3])\:[0-5]\d\:[0-5]\d)$',
            'message': 'Please date and time format has to be : 12/04/2015 12:32:10'
        }
      }
    }
  });

If you want a custom validator, you have to implement the validation logic in the validator. You just copied the sample validator from the docs, which only compares the users input value with the 'onlyValidValue' configured in the constraints. What you want to do is more like:

valdrProvider.addConstraints({
    'Person': {
      'date_send': {
        'customDateValidator': {
            'message': 'Please date and time format has to be : 12/04/2015 12:32:10'
        }
      }
    }
  });

Custom validator:

myApp.factory('customDateValidator', function () {
  return {
    name: 'customDateValidator', 
    validate: function (value, arguments) {
      var dateCheck = /^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2})$|^(([0-2]\d|[3][0-1])\/([0]\d|[1][0-2])\/[2][0]\d{2}\s([0-1]\d|[2][0-3])\:[0-5]\d\:[0-5]\d)$/
      return dateCheck.test(value);
    }
  };
});

Answer 2

I can't be 100% sure because you didn't provide enough code but I guess your input field declaration should be

ng-model="person.date_send"

rather than

ng-model="date_send"

For reference please have a look at the custom validator demo. It's always helpful if you can provide a plunker with a complete sample.