2024-01-19 18:25:59 -06:00
|
|
|
<%= form_with(model: employer, local: true, html: { class: 'needs-validation', novalidate: true }) do |form| %>
|
|
|
|
<% if employer.errors.any? %>
|
|
|
|
<div id="error_explanation" class="alert alert-danger" role="alert">
|
|
|
|
<h4><%= pluralize(employer.errors.count, "error") %> prohibited this employer from being saved:</h4>
|
|
|
|
<ul>
|
|
|
|
<% employer.errors.full_messages.each do |message| %>
|
|
|
|
<li><%= message %></li>
|
|
|
|
<% end %>
|
|
|
|
</ul>
|
2024-01-17 01:21:20 -06:00
|
|
|
</div>
|
|
|
|
<% end %>
|
2024-01-19 18:25:59 -06:00
|
|
|
|
|
|
|
<div class="mb-3">
|
|
|
|
<%= form.label :name, class: 'form-label' %>
|
|
|
|
<%= form.text_field :name, class: 'form-control' %>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Repeat for other attributes -->
|
|
|
|
<div class="mb-3">
|
|
|
|
<%= form.label :address, class: 'form-label' %>
|
|
|
|
<%= form.text_area :address, rows: 1, class: 'form-control auto-expand' %>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="mb-3">
|
|
|
|
<%= form.label :phone, class: 'form-label' %>
|
|
|
|
<%= form.telephone_field :phone, id: 'phone-field', class: 'form-control', placeholder: '(XXX)-XX-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 :tin, 'TIN', class: 'form-label' %>
|
|
|
|
<%= form.text_field :tin, id: 'tin-field', class: 'form-control', maxlength: 10, placeholder: 'XX-XXXXXXX' %>
|
|
|
|
</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 text-center">
|
2024-01-22 15:22:22 -06:00
|
|
|
<%= form.submit class: 'btn btn-success' %>
|
2024-01-19 18:25:59 -06:00
|
|
|
</div>
|
2024-01-22 15:22:22 -06:00
|
|
|
|
|
|
|
|
2024-01-19 18:25:59 -06:00
|
|
|
<% end %>
|
|
|
|
|
2024-01-17 01:21:20 -06:00
|
|
|
|
|
|
|
|
|
|
|
<%# 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);
|
|
|
|
});
|
|
|
|
});
|
2024-01-17 02:55:54 -06:00
|
|
|
</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 format the TIN correctly %>
|
|
|
|
<script>
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
|
|
const tinField = document.getElementById('tin-field');
|
|
|
|
|
|
|
|
tinField.addEventListener('input', () => {
|
|
|
|
let tin = tinField.value.split('-').join(''); // Remove dashes
|
|
|
|
tin = tin.replace(/\D/g, ''); // Keep numbers only
|
|
|
|
|
|
|
|
if (tin.length > 2) {
|
|
|
|
tin = tin.slice(0, 2) + '-' + tin.slice(2, 9);
|
|
|
|
}
|
|
|
|
tinField.value = tin; // Update the field value
|
|
|
|
});
|
|
|
|
});
|
2024-01-17 01:21:20 -06:00
|
|
|
</script>
|