256 lines
8.1 KiB
Plaintext
256 lines
8.1 KiB
Plaintext
<%= form_with(model: participant, local: true, html: { class: 'needs-validation', novalidate: true }) do |form| %>
|
|
<% if participant.errors.any? %>
|
|
<div id="error_explanation" class="alert alert-danger" role="alert">
|
|
<h4><%= pluralize(participant.errors.count, "error") %> prohibited this participant from being saved:</h4>
|
|
<ul>
|
|
<% participant.errors.full_messages.each do |message| %>
|
|
<li><%= message %></li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="mb-3">
|
|
<%= form.label :first_name, 'First Name', class: 'form-label' %>
|
|
<%= form.text_field :first_name, class: 'form-control' %>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<%= form.label :last_name, 'Last Name', class: 'form-label' %>
|
|
<%= form.text_field :last_name, class: 'form-control' %>
|
|
</div>
|
|
|
|
|
|
<%# Address Line 1 Field %>
|
|
<div class="mb-3">
|
|
<%= form.label :address_line_1, 'Address Line 1', class: 'form-label' %>
|
|
<%= form.text_field :address_line_1, class: 'form-control' %>
|
|
</div>
|
|
|
|
<%# Address Line 2 Field %>
|
|
<div class="mb-3">
|
|
<%= form.label :address_line_2, 'Address Line 2', class: 'form-label' %>
|
|
<%= form.text_field :address_line_2, class: 'form-control' %>
|
|
</div>
|
|
|
|
<%# City Field %>
|
|
<div class="mb-3">
|
|
<%= form.label :city, class: 'form-label' %>
|
|
<%= form.text_field :city, class: 'form-control' %>
|
|
</div>
|
|
|
|
<%# State Field %>
|
|
<div class="mb-3">
|
|
<%= form.label :state, class: 'form-label' %>
|
|
<%= form.text_field :state, class: 'form-control' %>
|
|
</div>
|
|
|
|
<%# Zip Field %>
|
|
<div class="mb-3">
|
|
<%= form.label :zip, 'ZIP', class: 'form-label' %>
|
|
<%= form.text_field :zip, class: 'form-control' %>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<%= form.label :phone, class: 'form-label' %>
|
|
<%= form.telephone_field :phone, id: 'phone-field', class: 'form-control', placeholder: '(XXX)XXX-XXXX' %>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<%= form.label :email, class: 'form-label' %>
|
|
<%= form.email_field :email, id: 'email-field', class: 'form-control', required: true, placeholder: 'Make sure to include @ sign' %>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<%= form.label :is_employer, 'Is this participant also an employer?', class: 'form-label' %>
|
|
<div>
|
|
<%= radio_button_tag 'is_employer', 'yes', true, class: 'form-check-input' %>
|
|
<%= label_tag 'is_employer_yes', 'Yes', class: 'form-check-label' %>
|
|
<%= radio_button_tag 'is_employer', 'no', false, class: 'form-check-input' %>
|
|
<%= label_tag 'is_employer_no', 'No', class: 'form-check-label' %>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="employer-input" class="mb-3" style="display: none;">
|
|
<%= label_tag :employer_name, 'Employer Name', class: 'form-label' %>
|
|
<%= text_field_tag :employer_name, nil, id: 'employer-autocomplete', class: 'form-control', placeholder: 'Start typing employer name...' %>
|
|
<!-- Optionally, add a hidden field to store the selected employer's ID -->
|
|
<%= hidden_field_tag :employer_id, nil, id: 'selected-employer-id' %>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<%= form.label :mci, 'MCI', class: 'form-label' %>
|
|
<%= form.text_field :mci, class: 'form-control', placeholder: 'Required for Participant', maxlength: 10, pattern: "\\d{10}", oninput: "validateMCI(this)" %>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<%= form.label :dob, 'Date of Birth', class: 'form-label' %>
|
|
<%= form.date_field :dob, class: 'form-control' %>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<%= form.label :ssn, 'Social Security Number', class: 'form-label' %>
|
|
<%= form.text_field :ssn, id: 'ssn-field', class: 'form-control', maxlength: 11, placeholder: 'XXX-XX-XXXX' %>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<%= form.label :gender, class: 'form-label' %>
|
|
<%= form.select :gender, ['Unknown', 'Female', 'Male', 'Non-Binary', 'Other'], {}, class: 'form-select' %>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<%= form.submit class: 'btn btn-dark' %>
|
|
</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 %>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const ssnField = document.getElementById('ssn-field');
|
|
|
|
ssnField.addEventListener('input', () => {
|
|
let ssn = ssnField.value.split('-').join(''); // Remove dashes
|
|
ssn = ssn.replace(/\D/g, ''); // Keep numbers only
|
|
|
|
if (ssn.length > 3 && ssn.length <= 5) {
|
|
ssn = ssn.slice(0, 3) + '-' + ssn.slice(3);
|
|
} else if (ssn.length > 5) {
|
|
ssn = ssn.slice(0, 3) + '-' + ssn.slice(3, 5) + '-' + ssn.slice(5, 9);
|
|
}
|
|
ssnField.value = ssn; // Update the field value
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
<%# This is to auto complete the Employer field on hand entry %>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
|
|
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#employer-autocomplete').autocomplete({
|
|
source: function(request, response) {
|
|
$.ajax({
|
|
url: '/employers/search', // Rails endpoint for searching employers
|
|
dataType: "json",
|
|
data: { term: request.term },
|
|
success: function(data) {
|
|
response(data);
|
|
}
|
|
});
|
|
},
|
|
minLength: 2, // Minimum characters to trigger the search
|
|
select: function(event, ui) {
|
|
// Function to handle selection
|
|
$('#employer-autocomplete').val(ui.item.label); // ui.item.label should contain the name of the employer
|
|
$('#selected-employer-id').val(ui.item.value); // Set the employer ID in the hidden field
|
|
return false;
|
|
}
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<%# This is to change the Employer input field on Radio Button selection %>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const employerInputDiv = document.getElementById('employer-input');
|
|
const radioButtons = document.getElementsByName('is_employer');
|
|
|
|
for (const radioButton of radioButtons) {
|
|
radioButton.addEventListener('change', function() {
|
|
if (this.value === 'no') {
|
|
employerInputDiv.style.display = 'block';
|
|
} else {
|
|
employerInputDiv.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<%# This is to limit the MCI to 10 numeric digits on entry %>
|
|
|
|
<script>
|
|
function validateMCI(input) {
|
|
let value = input.value;
|
|
let newValue = value.replace(/[^0-9]/g, '');
|
|
|
|
if (newValue.length > 10) {
|
|
newValue = newValue.slice(0, 10);
|
|
}
|
|
|
|
input.value = newValue;
|
|
}
|
|
</script>
|
|
|
|
|