JSFiddle - React, Tailwind, and code Playground

by aalfiann

HTML

<script src="https://cdn.jsdelivr.net/npm/native-form-validation@1.3.0/dist/formvalidation.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Form Example</title>
  <!-- Bootstrap CSS from jsDelivr -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <h2>Form Register</h2>
    <form class="mb-5">
      <div class="mb-3">
        <label for="selectOption" class="form-label">Select Option</label>
        <select class="form-select" id="selectOption">
          <option value="" selected>Select an option</option>
          <option value="1">Using Username</option>
          <option value="2">Using Email</option>
        </select>
        <small id="selectOption_error"></small>
      </div>
      <div id="username-container" class="mb-3" hidden>
        <label for="username" class="form-label">Username</label>
        <input type="text" class="form-control" id="username">
        <small id="username_error"></small>
      </div>
      <div id="email-container" class="mb-3" hidden>
        <label for="email" class="form-label">Email</label>
        <input type="email" class="form-control" id="email" placeholder="Enter Email">
        <small id="email_error"></small>
      </div>
      <div class="mb-3">
        <label for="address" class="form-label">Address</label>
        <textarea rows="3" class="form-control" id="address" placeholder="Enter your address"></textarea>
      </div>
      
      <button onclick="submitBtn()" type="button" class="btn btn-primary">Submit</button>
    </form>
  </div>
  <!-- Bootstrap JS and dependencies from jsDelivr -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

JavaScript

function submitBtn() {
	if(form.validate().isValid()) {
  	alert('OK');
  }
}

// create validation
var form = new FormValidation();

// Set default rules
form.rules({
	selectOption: {
  	required: true,
    message: 'You have to choose the option.',
    method: function(elm) {
      if(elm.value === '') {
        return false;
      }
      return true;
    },
    errorPlace:'selectOption_error',
    errorAddClass: {
      selectOption: 'is-invalid',
      selectOption_error: 'text-danger'
    }
  }
});

// set conditional rules for username
var usernameRule = {
  required: true,
  trim: false,
  message: 'Username must be lowercase alphanumeric or with underscore, dot or plus.',
  regex: /^[a-z0-9_.+]{3,64}$/,
  errorPlace:'username_error',
  errorAddClass: {
    username:'is-invalid',
    username_error:'text-danger'
  }
};

// set conditional rules for email
var emailRule = {
  required: true,
  trim: false,
  message: 'Wrong email format!',
  regex: /^(?=.{1,64}@)[a-z0-9._%+-]+@([a-z0-9-]+\.)+[a-z]{2,}$/,
  errorPlace:'email_error',
  errorAddClass: {
    email:'is-invalid',
    email_error:'text-danger'
  }
};

// Event Listener
document.getElementById('selectOption').addEventListener('change', function(ev) {
  var usernameContainer = document.getElementById('username-container');
  var emailContainer = document.getElementById('email-container');
  if (ev.target.value === '1') { // show username
    usernameContainer.hidden = false;
    emailContainer.hidden = true;
    // set conditional rules
    form.add('username', usernameRule);
  } else if (ev.target.value === '2') { // show email
    usernameContainer.hidden = true;
    emailContainer.hidden = false;
    // set conditional rules
    form.add('email', emailRule);
  } else {
    usernameContainer.hidden = true;
    emailContainer.hidden = true;
    // reset and removing all conditional rules
    form.reset().remove(['username','email']);
 ...