Form validation using javascript

Form validation occurs after the client had entered all the necessary data and then pressed the Submit button. If the data entered by a client was incorrect or was simply missing the form must be resubmitted with correct information.

1. Validator functions

Since the data that is entered must be checked for correct form and value. Your code must include appropriate logic to test correctness of data.

Create validator functions for each input type containing the structure of validating and a result.

 const validateNumber = text => {
 if(isNaN(text) || typeof parseInt(text) !== 'number' || text==null  ) {
    return { valid: false, error: "Please provide a number" };
  }
  return { valid: true, error: null };
};


const validateText = text => {
  if (text==null || !text.length ) {
    return { valid: false, error: "Provide a" };
  }
  return { valid: true, error: null };
};
const validateSelect = text => {
  if (isNaN(text) || typeof text !== 'number' || text==null ) {
    return { valid: false, error: "Choose a" };
  }
  return { valid: true, error: null };
};

const validatePhone = phone => {
  if (!phone.length) {
    return { valid: false, error: 'This field is required.' };
  }

  if (!phone.match(/^[+][(]?[0-9]{1,3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,7}$/gm)) {
    return { valid: false, error: 'Please, enter a valid international phone number.' };
  }

  return { valid: true, error: null };
}

const validateEmail = email => {
  if (!email.length) {
    return { valid: false, error: "This field is required" };
  }
  if (!email.match(/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i)) {
    return { valid: false, error: "Please, enter a valid email." };
  }
  return { valid: true, error: null };
};

const validatePassword = password => {
  if (!password.length) {
    return { valid: false, error: "This field is required" };
  }
  if (password.length < 8) {
    return { valid: false, error: "Password is too short" };
  }
  return { valid: true, error: null };
};

const validateDate = date => {
  return { valid: true, error: null };
};

 
                           

2. Calling validators

We are calling validate() to validate data when onsubmit event is occurring. The following code shows the implementation of this validate() function.

function validate(inputs){
var errors={};
errors.valid=true;
  for(var i=0 ; i<inputs.length;i++){
    var validField={};
    switch(inputs[i].type){
      case 'text': validField=validateText(inputs[i].field_value);
      validField.error=validField.error+' '+ inputs[i].field_name;
      break;
      case 'number': validField=validateNumber(inputs[i].field_value);
      break;
      case 'select': validField=validateSelect(inputs[i].field_value);
      validField.error=validField.error+' '+ inputs[i].field_name;
      break;
      case 'phone':validField=validatePhone(inputs[i].field_value);
      break;
      case 'password':validField=validatePassword(inputs[i].field_value);
      break;
      case 'email':validField=validateEmail(inputs[i].field_value);
      break;
      case 'date':validField=validateDate(inputs[i].field_value);
      break;
    }
    if(!validField.valid){
      errors.valid=false;
      errors[inputs[i].field_name] = validField.error;
  }


  }
  return errors;

}
  
  

3. Passing json

Let's create a json array containing some inputs types as examples to our form (text,number...). We will call validate function and in callback if not valide errors will be distributed to appropiate fields.

          var inputsToValidate=[{"field_name":"title","field_value":this.input.title,"type":"text"},
          {"field_name":"category","field_value":this.input.post_category,"type":"select"},
          {"field_name":"phone","field_value":this.input.phone,"type":"number"}]
          var result=validate(inputsToValidate);
          if(!result.valid){ this.errors=result;}

							

Done!!