Merge pull request #151 from unicef/feature/add-regex-validation-to-t…

…ext-validation

PR to add matchRegexpCaseInSensitive rule to ValidatorForm

example/src/components/FormValidator.js

@@ -78,6 +78,7 @@ export default function FormValidator() {
   const [values, setValues] = useState({
     currency: '',
     email: '[email protected]',
+    regex: '',
     password: 'testinghere',
     positiveInteger: 1,
     currencyField: 1000.55,
@@ -325,6 +326,19 @@ export default function FormValidator() {
               value={values.safeText}
             />
           </Grid>
+          <Grid item xs={12} lg={3} xl={2}>
+            <UTextField
+              label="Custom regex(no script)"
+              onChange={handleValue}
+              className={classes.margin}
+              name="regex"
+              variant="outlined"
+              validators={[
+                'matchRegexpCaseInSensitive:^(?!.*<script\\b[^>]*>.*<\\/script\\s*>).*$',
+              ]}
+              value={values.regex}
+            />
+          </Grid>
           <Grid item xs={12} lg={3} xl={2}>
             <UTextField
               label="Alphanumeric"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unicef/material-ui",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "description": "UNICEF theme and components of material-ui for react",
   "main": "index.js",
   "files": [

src/components/UValidatorForm/UValidatorForm.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import {
   isAlphanumericText,
   isPhoneNumberText,
+  isRegexCaseInSensitive,
   isSafeText,
   isUrlText,
 } from '../../utils'
@@ -54,6 +55,13 @@ function ForwardRefForm(props, ref) {
     return isAlphanumericText(value)
   })
 
+  ValidatorForm.addValidationRule(
+    'matchRegexpCaseInSensitive',
+    (value, regexStr) => {
+      return isRegexCaseInSensitive(value, regexStr)
+    }
+  )
+
   return <ValidatorForm {...props} ref={ref} />
 }
 

src/utils/index.js

@@ -4,6 +4,7 @@ import {
   isSafeText,
   isAlphanumericText,
   isUrlText,
+  isRegexCaseInSensitive,
 } from './validationRules'
 
 export {
@@ -13,4 +14,5 @@ export {
   isSafeText,
   isAlphanumericText,
   isUrlText,
+  isRegexCaseInSensitive,
 }

src/utils/validationRules.js

@@ -12,6 +12,20 @@ export function isPhoneNumberText(value) {
   return true
 }
 
+/**
+ *
+ * @param {String} value Value text to be validated
+ * @returns {Boolean} Whether the given value string contains safe text (no html tags)
+ */
+export function isRegexCaseInSensitive(value, regexRule) {
+  const valueToTest = value || ''
+  const regexStr = regexRule
+  if (!regexStr) return true // if no regex, then accept any text
+
+  const regex = new RegExp(regexStr, 'i')
+  return regex.test(valueToTest)
+}
+
 /**
  *
  * @param {String} value Value text to be validated