Adds JS form validation util methods

app/assets/javascripts/lib/utils/forms.js

@@ -17,19 +17,70 @@ export const serializeForm = (form) => {
   return serializeFormEntries(entries);
 };
 
+/**
+ * Like trim but without the error for non-string values.
+ *
+ * @param {String, Number, Array} - value
+ * @returns {String, Number, Array} - the trimmed string or the value if it isn't a string
+ */
+export const safeTrim = (value) => (typeof value === 'string' ? value.trim() : value);
+
 /**
  * Check if the value provided is empty or not
  *
  * It is being used to check if a form input
- * value has been set or not
+ * value has been set or not.
  *
  * @param {String, Number, Array} - Any form value
  * @returns {Boolean} - returns false if a value is set
  *
  * @example
- * returns true for '', [], null, undefined
+ * returns true for '', '   ', [], null, undefined
+ */
+export const isEmptyValue = (value) => value == null || safeTrim(value).length === 0;
+
+/**
+ * Check if the value has a minimum string length
+ *
+ * @param {String, Number, Array} - Any form value
+ * @param {Number} - minLength
+ * @returns {Boolean}
+ */
+export const hasMinimumLength = (value, minLength) =>
+  !isEmptyValue(value) && value.length >= minLength;
+
+/**
+ * Checks if the given value can be parsed as an integer as it is (without cutting off decimals etc.)
+ *
+ * @param {String, Number, Array} - Any form value
+ * @returns {Boolean}
+ */
+export const isParseableAsInteger = (value) =>
+  !isEmptyValue(value) && Number.isInteger(Number(safeTrim(value)));
+
+/**
+ * Checks if the parsed integer value from the given input is greater than a certain number
+ *
+ * @param {String, Number, Array} - Any form value
+ * @param {Number} - greaterThan
+ * @returns {Boolean}
+ */
+export const isIntegerGreaterThan = (value, greaterThan) =>
+  isParseableAsInteger(value) && parseInt(value, 10) > greaterThan;
+
+/**
+ * Regexp that matches email structure.
+ * Taken from app/models/service_desk_setting.rb custom_email
+ */
+export const EMAIL_REGEXP = /^[\w\-._]+@[\w\-.]+\.[a-zA-Z]{2,}$/;
+
+/**
+ * Checks if the input is a valid email address
+ *
+ * @param {String} - value
+ * @returns {Boolean}
  */
-export const isEmptyValue = (value) => value == null || value.length === 0;
+export const isEmail = (value) => EMAIL_REGEXP.test(value);
 
 /**
  * A form object serializer

spec/frontend/lib/utils/forms_spec.js

 import {
   serializeForm,
   serializeFormObject,
+  safeTrim,
   isEmptyValue,
+  hasMinimumLength,
+  isParseableAsInteger,
+  isIntegerGreaterThan,
+  isEmail,
   parseRailsFormFields,
 } from '~/lib/utils/forms';
 
@@ -99,6 +104,22 @@ describe('lib/utils/forms', () => {
     });
   });
 
+  describe('safeTrim', () => {
+    it.each`
+      input        | returnValue
+      ${''}        | ${''}
+      ${[]}        | ${[]}
+      ${null}      | ${null}
+      ${undefined} | ${undefined}
+      ${' '}       | ${''}
+      ${'hello  '} | ${'hello'}
+      ${'hello'}   | ${'hello'}
+      ${0}         | ${0}
+    `('returns $returnValue for value $input', ({ input, returnValue }) => {
+      expect(safeTrim(input)).toEqual(returnValue);
+    });
+  });
+
   describe('isEmptyValue', () => {
     it.each`
       input        | returnValue
@@ -106,14 +127,102 @@ describe('lib/utils/forms', () => {
       ${[]}        | ${true}
       ${null}      | ${true}
       ${undefined} | ${true}
+      ${' '}       | ${true}
       ${'hello'}   | ${false}
-      ${' '}       | ${false}
       ${0}         | ${false}
     `('returns $returnValue for value $input', ({ input, returnValue }) => {
       expect(isEmptyValue(input)).toBe(returnValue);
     });
   });
 
+  describe('hasMinimumLength', () => {
+    it.each`
+      input         | minLength | returnValue
+      ${['o', 't']} | ${1}      | ${true}
+      ${'hello'}    | ${3}      | ${true}
+      ${'   '}      | ${2}      | ${false}
+      ${''}         | ${0}      | ${false}
+      ${''}         | ${8}      | ${false}
+      ${[]}         | ${0}      | ${false}
+      ${null}       | ${8}      | ${false}
+      ${undefined}  | ${8}      | ${false}
+      ${'hello'}    | ${8}      | ${false}
+      ${0}          | ${8}      | ${false}
+      ${4}          | ${1}      | ${false}
+    `(
+      'returns $returnValue for value $input and minLength $minLength',
+      ({ input, minLength, returnValue }) => {
+        expect(hasMinimumLength(input, minLength)).toBe(returnValue);
+      },
+    );
+  });
+
+  describe('isPareseableInteger', () => {
+    it.each`
+      input        | returnValue
+      ${'0'}       | ${true}
+      ${'12'}      | ${true}
+      ${''}        | ${false}
+      ${[]}        | ${false}
+      ${null}      | ${false}
+      ${undefined} | ${false}
+      ${'hello'}   | ${false}
+      ${' '}       | ${false}
+      ${'12.4'}    | ${false}
+      ${'12ef'}    | ${false}
+    `('returns $returnValue for value $input', ({ input, returnValue }) => {
+      expect(isParseableAsInteger(input)).toBe(returnValue);
+    });
+  });
+
+  describe('isIntegerGreaterThan', () => {
+    it.each`
+      input         | greaterThan | returnValue
+      ${25}         | ${8}        | ${true}
+      ${'25'}       | ${8}        | ${true}
+      ${'4'}        | ${1}        | ${true}
+      ${'4'}        | ${8}        | ${false}
+      ${'9.5'}      | ${8}        | ${false}
+      ${'9.5e'}     | ${8}        | ${false}
+      ${['o', 't']} | ${0}        | ${false}
+      ${'hello'}    | ${0}        | ${false}
+      ${'   '}      | ${0}        | ${false}
+      ${''}         | ${0}        | ${false}
+      ${''}         | ${8}        | ${false}
+      ${[]}         | ${0}        | ${false}
+      ${null}       | ${0}        | ${false}
+      ${undefined}  | ${0}        | ${false}
+      ${'hello'}    | ${0}        | ${false}
+      ${0}          | ${0}        | ${false}
+    `(
+      'returns $returnValue for value $input and greaterThan $greaterThan',
+      ({ input, greaterThan, returnValue }) => {
+        expect(isIntegerGreaterThan(input, greaterThan)).toBe(returnValue);
+      },
+    );
+  });
+
+  describe('isEmail', () => {
+    it.each`
+      input                                    | returnValue
+      ${'user-with_special-chars@example.com'} | ${true}
+      ${'user@subdomain.example.com'}          | ${true}
+      ${'user@example.com'}                    | ${true}
+      ${'user@example.co'}                     | ${true}
+      ${'user@example.c'}                      | ${false}
+      ${'user@example'}                        | ${false}
+      ${''}                                    | ${false}
+      ${[]}                                    | ${false}
+      ${null}                                  | ${false}
+      ${undefined}                             | ${false}
+      ${'hello'}                               | ${false}
+      ${' '}                                   | ${false}
+      ${'12'}                                  | ${false}
+    `('returns $returnValue for value $input', ({ input, returnValue }) => {
+      expect(isEmail(input)).toBe(returnValue);
+    });
+  });
+
   describe('serializeFormObject', () => {
     it('returns an serialized object', () => {
       const form = {