3. Input Validations

User Manual: Input Validation in Low Code Web Form Designer

Introduction

This user manual provides detailed instructions on how to perform input validation within a low-code web form designer. Input validation is essential to ensure that the data entered by users meets the required format, constraints, and business rules before being processed or stored. This guide will cover various validation techniques, including basic validations, advanced conditional validations, custom validation logic, and examples for each.

Table of Contents

  1. Understanding Input Validation
  2. Types of Input Validation
  3. Basic Validation Techniques
  4. Advanced Validation Techniques
  5. Custom Validation Logic
  6. Examples of Input Validation
  7. Testing and Debugging Validations
  8. Conclusion

1. Understanding Input Validation

Input validation is the process of verifying that the data entered by users in a web form meets specific criteria. This can include checking for the correct data type, ensuring required fields are not empty, and validating that inputs conform to a particular format or range.

Importance of Input Validation

  • Data Integrity: Ensures that only valid and correctly formatted data is processed or stored.
  • Security: Helps prevent security vulnerabilities such as SQL injection or XSS attacks by validating and sanitizing user inputs.
  • User Experience: Provides immediate feedback to users, allowing them to correct errors before submitting the form.

2. Types of Input Validation

Basic Validation

  • Required Fields: Ensures that mandatory fields are not left empty.
  • Data Type Validation: Verifies that the input matches the expected data type (e.g., numbers, text, dates).
  • Length Validation: Checks that the input does not exceed or fall short of a specified length.

Advanced Validation

  • Regular Expression (Regex) Validation: Uses patterns to validate complex input formats such as email addresses, phone numbers, or postal codes.
  • Range Validation: Ensures that numerical or date inputs fall within a specified range.
  • Conditional Validation: Applies validation rules based on other field values or conditions.

Custom Validation

  • Custom Logic: Implement bespoke validation rules using custom scripts or functions.
  • Asynchronous Validation: Validates inputs against external data sources or APIs in real time.

3. Basic Validation Techniques

Step 1: Setting Up Required Fields

  1. Open the Form Designer:
  2. Navigate to the web form where you want to apply input validation.

  3. Select the field that you want to make mandatory.

  4. Enable Required Field Validation:

  5. In the field properties panel, toggle the "Required" option to enable validation.

  6. Optionally, customize the error message that will appear if the field is left empty.

  7. Save and Test:

  8. Save the form and test it by attempting to submit it with the required field left blank.

Step 2: Applying Data Type Validation

  1. Select the Input Field:

  2. Choose the input field (e.g., text box, number field) that requires data type validation.

  3. Configure Data Type:

  4. In the field properties, select the appropriate data type (e.g., number, text, date).

  5. For numeric fields, specify whether to allow decimals or enforce integer-only values.

  6. Error Handling:

  7. Customize the error message that will be displayed if the input does not match the expected data type.

  8. Save and Test:

  9. Save the form and input data that violates the data type rules to see if the validation works as expected.

Step 3: Enforcing Length Validation

  1. Open the Field Properties:

  2. Select the field that requires length validation.

  3. Set Length Constraints:

  4. Define the minimum and maximum length allowed for the input (e.g., a password must be between 8 and 16 characters).

  5. Error Message Configuration:

  6. Set a custom error message for when the input length is invalid.

  7. Save and Test:

  8. Save the form and enter data that is too short or too long to test the validation.

4. Advanced Validation Techniques

Step 1: Implementing Regex Validation

  1. Select the Input Field:

  2. Choose the field where you want to apply regex validation (e.g., email address, phone number).

  3. Add Regex Pattern:

  4. In the field properties, find the "Validation" or "Pattern" option.

  5. Enter a regex pattern that matches the required format (e.g., ^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}$ for an email).

  6. Customize Error Messages:

  7. Provide a user-friendly error message that explains what is wrong with the input.

  8. Save and Test:

  9. Save the form and test it with various inputs to ensure the regex validation works correctly.

Step 2: Applying Range Validation

  1. Select the Numeric or Date Field:

  2. Choose the field that requires range validation (e.g., age, date of birth).

  3. Set the Valid Range:

  4. In the field properties, define the minimum and maximum allowable values.

  5. For dates, you can specify a start and end date range.

  6. Configure Error Messages:

  7. Customize the error message for when the input falls outside the allowed range.

  8. Save and Test:

  9. Save the form and input data outside the specified range to verify the validation.

Step 3: Creating Conditional Validation

  1. Select the Conditional Field:

  2. Choose the field that should be validated conditionally based on another field's value.

  3. Define the Condition:

  4. In the validation settings, create a rule that applies validation only if certain conditions are met (e.g., "If 'Country' is 'USA', then 'State' is required").

  5. Set Up Error Handling:

  6. Write a clear error message that indicates why the validation failed.

  7. Save and Test:

  8. Save the form and test the conditional validation by changing the trigger conditions.

5. Custom Validation Logic

Step 1: Writing Custom Validation Scripts

  1. Access the Custom Validation Editor:
  2. In the form designer, select the field where you want to add custom validation.

  3. Open the "Custom Validation" section.

  4. Write the Validation Script:

  5. Use the platform’s scripting language (e.g., JavaScript) to write a validation function.

  6. Example: javascript function validatePassword(input) { if (input.length < 8) { return "Password must be at least 8 characters long."; } if (!/[A-Z]/.test(input)) { return "Password must contain at least one uppercase letter."; } if (!/[0-9]/.test(input)) { return "Password must contain at least one number."; } return true; // Return true if validation passes }

  7. Apply the Script:

  8. Link the custom validation function to the field and specify when it should be triggered (e.g., on blur, on submit).

  9. Save and Test:

  10. Save the form and test the custom validation by entering both valid and invalid inputs.

Step 2: Implementing Asynchronous Validation

  1. Select the Field for Validation:

  2. Choose the field where asynchronous validation is needed (e.g., username availability check).

  3. Set Up API Integration:

  4. In the validation settings, configure an API call that checks the input against an external system.

  5. Example: Validate that a username is not already taken by querying the database.

  6. Handle the API Response:

  7. Write logic to process the API response and display appropriate error messages.

  8. Example: javascript function checkUsernameAvailability(username) { fetch(`https://api.example.com/check-username?username=${username}`) .then(response => response.json()) .then(data => { if (data.available) { return true; } else { return "Username is already taken."; } }); }

  9. Save and Test:

  10. Save the form and test the asynchronous validation by entering different usernames.

6. Examples of Input Validation

Example 1: Email Validation

  • Field: Email Address
  • Validation Type: Regex Validation
  • Pattern: ^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,}$
  • Error Message: "Please enter a valid email address."

Example 2: Age Validation

  • Field: Age
  • Validation Type: Range Validation
  • Range: 18 to 65
  • Error Message: "Age must be between 18 and 65."

Example 3: Password Validation

  • Field: Password
  • Validation Type: Custom Validation
  • Script: ```javascript function validatePassword(input) { if (input.length < 8) { return "Password must be at least 8 characters long."; } if (!/[A-Z]/.test(input)) { return "Password must contain at least one uppercase letter."; } if (!/[0-9]/.test(input)) { Input validation summary The platform includes robust validation capabilities to ensure data integrity and consistency:
  • Field-Level Validation: Validate individual fields for format, range, and required conditions.
  • Form-Level Validation: Implement checks that apply to the entire form before submission.
  • Custom Validation Rules: Create custom validation scripts using expressions or code snippets.
  • Real-Time Validation: Provide instant feedback to users as they enter data.
  • Error Messaging: Display custom error messages when validation fails.
  • Cross-Field Validation: Validate data based on conditions between multiple fields.