DEV Community

Eric See
Eric See

Posted on

Developing Form Validations

Validate process starts from form design

Very often we will need to create or update some forms before committing them to the backend.

Even before we create forms, keep open text fields to a mininum. Often, it is good to let the user select from predefine lists, radio choices, etc.

Validations both in backend and frontend

Validations of fields should be done on both frontend and backend. Alot of people implement validations on the frontend only. When someone uses postman or intercept the request and consume the APIs directly, it will create chaos in the database.

Common validations & code snippets

Some of the common validation checks are as follows:

  • Mandatory
//validate mandatory
Core_Utils.validateMandatory = function(value) {
  if (!value) {
    return true;
  } else {
    return false;
  }
}
Enter fullscreen mode Exit fullscreen mode
  • Numeric
Core_Utils.isNumeric = function(value) {
    return !isNaN(value);
}
Enter fullscreen mode Exit fullscreen mode
  • Email Format
//Validate Email
Core_Utils.validateEmail = function(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}
Enter fullscreen mode Exit fullscreen mode
  • Minimum & Maximum Length Check
//Length Check
Core_Utils.validateLength = function(value, min, max) {
  if ((value>=min) && (value<max)) {
    return true;
  } else {
    return false;
  }
}
Enter fullscreen mode Exit fullscreen mode
  • Whether field contains special characters
//Check whether content is safe
/*
< (open angle parenthesis)
> (close angle parenthesis)
• ' (single apostrophe)
• " (quotation mark)
• \' (backslash-escaped apostrophe)
• \" (backslash-escaped quotation mark)
• ( (opening parenthesis)
• ) (closing parenthesis)
• ; (semicolon)
• % (percentage)
*/
Core_Utils.isSanitized = function(content) {
    if (content!="") {
      var regex = /<|>|\'|\"|\(|\)|;|%/g;
      return !regex.test(content);
    }
    return true;
}

Enter fullscreen mode Exit fullscreen mode
  • JSON content
//Check whether string is JSON
Core_Utils.isJson = function(str) {
    try {
        JSON.parse(str);
    } catch (e) {
        return false;
    }
    return true;
}
Enter fullscreen mode Exit fullscreen mode
  • IP Address
//validate Ip address
Core_Utils.validateIPaddress = function(ipaddress) {
  if (/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ipaddress)) {
    return true;
  }
  return false;
}

Enter fullscreen mode Exit fullscreen mode
  • Version (major.minor.variant format)
//validate version
Core_Utils.validateVersion = function(version) {
  if (/^\d{1,2}\.\d{1,2}\.\d{1,2}$/.test(version)) {
    return true;
  } else {
    return false;
  }
}
Enter fullscreen mode Exit fullscreen mode

Validation real-time or upon submit?

Personally, its more user friendly to display error message in real-time as the user types.
Image description

Happy Coding!

Top comments (0)