Valid88

Valid88 is a framework for validating user input on the front and back end from a single configuration file.

So what are the benefits?

- Easy to configure field validation

- Executed on the client and server

- Helps secure against rest client attacks

Click the login button below to see it in action...

Here's the configuration for validating this form...

{
  "validationsets":[
    {"name":"userdetails", "fields":[
      {"name":"firstname", "field":"user.firstname", "type":"string", "validations":[
        {"name":"standardname", "composite":true}
      ]},
      {"name":"lastname", "field":"user.lastname", "type":"string", "validations":[
        {"name":"standardname", "composite":true}
      ]},
      {"name":"email", "field":"user.email", "type":"string", "validations":[
        {"name":"email"}
      ]},
      {"name":"dob", "field":"user.dob", "type":"date", "validations":[
        {"name":"mandatory", "value":true},
        {"name":"date", "variants":
          [
            {"type":"atleast", "value":18, "datepart":"years"},
            {"type":"atmost", "value":80, "datepart":"years"}
          ]
        }
      ]}
    ]}
  ],

  "compositevalidations":[
    {"name": "standardname", "type":"string", "validations":[
      {"name":"mandatory", "value":true},
      {"name":"regex", "value":{"types":["alpha","latin"]}, "additionalchars":"' "},
      {"name":"maxlength", "length":24}
    ]}
  ]
}

There are four field validations configured here. The firstname and lastname fields both use the composite validation standardname which has mandatory, regex and maxlength validations. The email address field uses an email validator. The dob validation has a mandatory validation and and date validation which checks that the date gives an age of between 18 and 80 years.

To apply they validations on the client just load the configuration above into a Valid88 object and then pass the data to be validated.

var result = v88.validateInput('userdetails', {user:form.values});
setValues({...form, errors: result.errors});

Our configuration can contain more than one validation set, so we pass the name of the validation set to be used in the first parameter. The second parameter is simply the object containing the data.

Server Validation

Any web developer knows how important it is not to rely solely on client side validation. Client requests can easily be inspected and replicated with invalid data as part of an attack. One of the main advantages of Valid88 is that the same validations can be applied on the client and the server by using the very same configuration files.

Using the configuration files above, the request JSON below can be validated in the same way on the server.

Try clicking the send button and you will see the response from Valid88 on the server.

Localised Error Messages

Localisation can be achieved easliy with Valid88. Starting with the UI language settings that are used to populate the form

const lang = {
  en:{
    USER_DETAILS:'User Details',
    FIRSTNAME:'Firstname',
    LASTNAME:'Lastname',
    EMAIL:'Email',
    DOB:'Date of Birth',
    LOGIN:'Login',
  },
  fr:{
    USER_DETAILS:'Détails de l\'Utilisateur',
    FIRSTNAME:'Prénom',
    LASTNAME:'Nom de famille',
    EMAIL:'Email',
    DOB:'Date de naissance',
    LOGIN:'s\'Identifier',
  }
}

Next create the localisation file that will be used by Valid88

{
    "messages" : {
        "MAND_DEFAULT" :    "le champ '${DEF.label}' doit être fourni",
        "EMAIL_DEFAULT" :   "le champ '${DEF.label}' n'est pas un email valide",
        "DATE_ATLEAST" :    "le champ '${DEF.label}' doit être au moins ${VARIANT.value} ${FLD.DATEPART_INTERVALS.${VARIANT.datepart}}",
        "DATE_ATMOST" :     "le champ '${DEF.label}' doit être au plus ${VARIANT.value} ${FLD.DATEPART_INTERVALS.${VARIANT.datepart}}",
        "DATE_BEFORE" :     "le champ '${DEF.label}' doit être avant ${PRM.refDate}",
        "DATE_AFTER" :      "le champ '${DEF.label}' doit être après ${PRM.refDate}",
        "REGEX_DEFAULT" :   "le champ '${DEF.label}' contient des caractères invalides",
        "LENGTH_MAX" :      "le champ '${DEF.label}' ne peut pas contenir plus de ${CFG.max} caractères",
        "LENGTH_MIN" :      "le champ '${DEF.label}' doit contenir au moins ${CFG.min} caractères"
    },
    "fields" : {
        "DATEPART_INTERVALS": {"days":"journées", "months":"mois", "years":"années"}
    }
}

And then switch locale when the radios are clicked

const handleLanguageChange = (selectedLang) => {
  setValues({...form, language:selectedLang, errors: []});
  if (selectedLang == 'fr')  {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", './valid88/valid88-messages_fr.json', false );
    xmlHttp.send( null );
    v88.setLocale(JSON.parse(xmlHttp.responseText));
  } else {
    v88.setLocale(null);
  }
  v88.setVariables(lang[selectedLang]);
}

The forms above are created with React and MaterialUI. The source code for this page can be found here

out more about Valid88 at Github