obdev/app/views/participants/_form.html.erb

<%= form_with(model: participant, local: true) do |form| %>
    <% if participant.errors.any? %>
      <div id="error_explanation">
        <h2><%= pluralize(participant.errors.count, "error") %> prohibited this participant from being saved:</h2>
  
        <ul>
          <% participant.errors.full_messages.each do |message| %>
            <li><%= message %></li>
          <% end %>
        </ul>
      </div>
    <% end %>
  
    <div class="field">
      <%= form.label :name %>
      <%= form.text_field :name %>
    </div>
  
    <div class="field">
        <%= form.label :address %>
        <%= form.text_area :address, rows: 1, class: 'auto-expand' %>
    </div>
  
    <div class="field">
      <%= form.label :phone %>
      <%= form.telephone_field :phone, id: 'phone-field' %>
    </div>

  
    <div class="field">
    <%= form.label :email %>
    <%= form.email_field :email, id: 'email-field', required: true %>
    </div>
  
  
    <div class="field">
      <%= form.label :mci, 'MCI' %>
      <%= form.text_field :mci %>
    </div>
  
    <div class="field">
      <%= form.label :dob, 'Date of Birth' %>
      <%= form.date_field :dob %>
    </div>
  
    <div class="field">
    <%= form.label :ssn, 'Social Security Number' %>
    <%= form.text_field :ssn, id: 'ssn-field', maxlength: 11, placeholder: 'XXX-XX-XXXX' %>
    </div>
  
    <div class="field">
      <%= form.label :gender %>
      <%= form.select :gender, ['Unknown', 'Female', 'Male', 'Non-Binary', 'Other'] %>
    </div>
  
    <div class="actions">
      <%= form.submit %>
    </div>
  <% end %>

  <%# This is to correct phone number entry %>
  <script>
  document.addEventListener("DOMContentLoaded", function() {
    const phoneField = document.getElementById('phone-field');

    phoneField.addEventListener('input', function() {
      let input = phoneField.value.replace(/\D/g, ''); // Remove non-numeric characters
      const inputLength = input.length;

      if (inputLength > 3 && inputLength <= 6) {
        input = `(${input.slice(0, 3)}) ${input.slice(3)}`;
      } else if (inputLength > 6) {
        input = `(${input.slice(0, 3)}) ${input.slice(3, 6)}-${input.slice(6, 10)}`;
      }

      phoneField.value = input;
    });
  });
</script>


<%# This is for auto resizing the address field %>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const textareas = document.querySelectorAll('.auto-expand');

    const resizeTextarea = function(el) {
      el.style.height = 'auto';
      el.style.height = (el.scrollHeight) + 'px';
    }

    textareas.forEach(textarea => {
      textarea.addEventListener('input', function() {
        resizeTextarea(textarea);
      });

      // Initial resize
      resizeTextarea(textarea);
    });
  });
</script>

<%# This is to require 1 @ sign for email entry %>
<script>
  document.addEventListener('turbolinks:load', function() {
    const emailField = document.getElementById('email-field');

    emailField.addEventListener('input', function() {
      const emailValue = emailField.value;
      const atSignCount = (emailValue.match(/@/g) || []).length;

      if (atSignCount !== 1) {
        emailField.setCustomValidity("Email must contain exactly one '@' sign.");
      } else {
        emailField.setCustomValidity('');
      }
    });
  });
</script>


<%# This is for Social Security formatting and # of digits %>