small fix for custom rules

dockwa · Apr 2, 2018 · d017bd3 · d017bd3
1 parent eda54f0
commit d017bd3
Show file tree

Hide file tree

Showing 8 changed files with 859 additions and 202 deletions.
diff --git a/README.md b/README.md
@@ -133,11 +133,11 @@ Example:
 ```javascript
 constructor() {
   this.validator = new SimpleReactValidator({
-    ip: { //name the rule
-      message: 'The :attribute must be a valid IP address.', //give a message that will display when there is an error. :attribute will be replaced by the name you supply in calling it.
-      rule: function(val, options)){ //return true if it is succeeds and false it if fails validation. the _testRegex method is available to give back a true/false for the regex and given value
+    ip: { // name the rule
+      message: 'The :attribute must be a valid IP address.', // give a message that will display when there is an error. :attribute will be replaced by the name you supply in calling it.
+      rule: function(val, options){ // return true if it is succeeds and false it if fails validation. the _testRegex method is available to give back a true/false for the regex and given value
         // check that it is a valid IP address and is not blacklisted
-        this._testRegex(val,/^(?!0)(?!.*\.$)((1?\d?\d|25[0-5]|2[0-4]\d)(\.|$)){4}$/i) && options.indexOf(val) === -1
+        return this._testRegex(val,/^(?!0)(?!.*\.$)((1?\d?\d|25[0-5]|2[0-4]\d)(\.|$)){4}$/i) && options.indexOf(val) === -1
       }
     }
   });

diff --git a/bower.json b/bower.json
@@ -2,7 +2,7 @@
   "name": "simple-react-validator",
   "description": "A simple react form validator inspired by Laravel validation.",
   "main": "dist/simple-react-validator.min.js",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "authors": [
     "Stuart Yamartino"
   ],

diff --git a/dist/simple-react-validator.js b/dist/simple-react-validator.js
@@ -168,7 +168,7 @@ var SimpleReactValidator = function () {
         rule = this._getRule(tests[i]);
         options = this._getOptions(tests[i]);
         // test if the value passes validation
-        if (this.rules[rule].rule(value, options) === false) {
+        if (this.rules[rule].rule.call(this, value, options) === false) {
           this.fields[field] = false;
           if (this.messagesShown) {
             message = customErrors[rule] || customErrors.default || this.rules[rule].message.replace(':attribute', field.replace(/_/g, ' '));

diff --git a/dist/simple-react-validator.min.js b/dist/simple-react-validator.min.js
diff --git a/example/example.jsx b/example/example.jsx
@@ -1,11 +1,18 @@
- var ExampleForm = React.createClass({
+var ExampleForm = React.createClass({
 
   getInitialState: function() {
     return {};
   },
 
   componentWillMount: function() {
-    this.validator = new SimpleReactValidator();
+    this.validator = new SimpleReactValidator({
+      ip: {
+        message: 'The :attribute must be a valid IP address.',
+        rule: function(val, options){
+          return this._testRegex(val,/^(?!0)(?!.*\.$)((1?\d?\d|25[0-5]|2[0-4]\d)(\.|$)){4}$/i) && options.indexOf(val) === -1
+        }
+      }
+    });
   },
 
   submitForm: function() {
@@ -84,13 +91,13 @@
           <div className="form-group">
             <label>gt</label>
             <input className="form-control" name="gt" value={this.state.gt} onChange={this.setStateFromInput} />
-            {this.validator.message('gt', this.state.gt, 'required|gt:30')}
+            {this.validator.message('greater_than', this.state.gt, 'required|gt:30')}
           </div>
 
           <div className="form-group">
             <label>gte</label>
             <input className="form-control" name="gte" value={this.state.gte} onChange={this.setStateFromInput} />
-            {this.validator.message('gte', this.state.gte, 'required|gte:30')}
+            {this.validator.message('greater_than_or_equal', this.state.gte, 'required|gte:30')}
           </div>
 
           <div className="form-group">
@@ -108,13 +115,13 @@
           <div className="form-group">
             <label>lt</label>
             <input className="form-control" name="lt" value={this.state.lt} onChange={this.setStateFromInput} />
-            {this.validator.message('lt', this.state.lt, 'required|lt:30')}
+            {this.validator.message('less_than', this.state.lt, 'required|lt:30')}
           </div>
 
           <div className="form-group">
             <label>lte</label>
             <input className="form-control" name="lte" value={this.state.lte} onChange={this.setStateFromInput} />
-            {this.validator.message('lte', this.state.lte, 'required|lte:30')}
+            {this.validator.message('less_than_or_equal', this.state.lte, 'required|lte:30')}
           </div>
 
           <div className="form-group">
@@ -153,6 +160,12 @@
             {this.validator.message('required', this.state.required, 'required')}
           </div>
 
+          <div className="form-group">
+            <label>IP Address (custom example)</label>
+            <input className="form-control" name="ip" value={this.state.ip} onChange={this.setStateFromInput} />
+            {this.validator.message('ip_address', this.state.ip, 'required|ip:127.0.0.1')}
+          </div>
+
           <button className="btn btn-primary" onClick={this.submitForm}>Submit</button>
         </div>
       </div>