JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<form id="myForm">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <span class="error" id="nameError"></span>
    <p class="example">Example: John Doe</p>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <span class="error" id="emailError"></span>
    <p class="example">Example: [email protected]</p>
  </div>
  <div>
    <label for="age">Age:</label>
    <input type="number" id="age" name="age">
    <span class="error" id="ageError"></span>
    <p class="example">Example: 25</p>
  </div>
  <div>
    <label for="percentage">Percentage:</label>
    <input type="number" id="percentage" name="percentage">
    <span class="error" id="percentageError"></span>
    <p class="example">Example: 75%</p>
  </div>
  <div>
    <label for="amount">Dollar Amount:</label>
    <input type="number" id="amount" name="amount">
    <span class="error" id="amountError"></span>
    <p class="example">Example: $100.50</p>
  </div>
  <button type="submit">Submit</button>
</form>

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('myForm');

    function promptUserForRules(field, rule) {
      const result = prompt(`Enter rule for field '${field.name}' (Yes/No/Number):`);
      
      if (result === 'Yes') {
        rule.method = validateYesNo;
        rule.message = 'Invalid value for Yes/No';
      } else if (result === 'No') {
        rule.method = validateYesNo;
        rule.message = 'Invalid value for Yes/No';
        rule.skipToQuestion = prompt('Enter the ID of the question to skip to:');
      } else if (!isNaN(result)) {
        const inputType = prompt('Enter the input type (Raw/Percentage/Dollar):');
        if (inputType === 'Raw') {
          rule.method = validateNumber;
          rule.message = 'Invalid numeric value';
        } else if (inputType === 'Percentage') {
          rule.method = validateNumber;
          rule.message = 'Invalid percentage value';
          rule.isPercentage = true;
        } else if (inputType === 'Dollar') {
          rule.method = validateNumber;
          rule.message = 'Invalid dollar amount value';
          rule.isDollarAmount = true;
        }
        
        const shouldSumGroup = prompt('Should this input be part of a sum group? (Yes/No):');
        if (shouldSumGroup === 'Yes') {
          const groupLetter = prompt('Enter the group letter for this sum group:');
          field.setAttribute('data-group-letter', groupLetter);
        }
      }
    }

    // Define your validation functions here (validateYesNo, validateNumber, etc.)

    const rules = [
      { field: 'yes_no', method: validateYesNo },
      { field: 'email', method: null },
      { field: 'age', method: null },
      { field: 'percentage', method: null },
      { field: 'amount', method: null }
      // Add more rules for other form fields
    ];

    for (const rule of rules) {
      const field = form.elements[rule.field];

      promptUserForRules(field, rule);

    ...