brought session form validation in line with bootstrap styling

This commit is contained in:
Adam Piontek 2021-03-01 16:29:19 -05:00
parent db796812ae
commit ccb67ea3f2
4 changed files with 30 additions and 3 deletions

View file

@ -0,0 +1,18 @@
// Fetch all the forms we want to apply custom Bootstrap validation styles to
let forms = document.querySelectorAll(".needs-validation");
// Loop over them and prevent submission
Array.prototype.slice.call(forms).forEach(function (form) {
form.addEventListener(
"submit",
function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
},
false
);
});

View file

@ -15,6 +15,7 @@ import "../node_modules/bootstrap-icons/icons/box-arrow-right.svg"; // log out
import "../node_modules/bootstrap-icons/icons/at.svg"; import "../node_modules/bootstrap-icons/icons/at.svg";
import "../node_modules/bootstrap-icons/icons/key.svg"; import "../node_modules/bootstrap-icons/icons/key.svg";
import "../node_modules/bootstrap-icons/icons/key-fill.svg"; import "../node_modules/bootstrap-icons/icons/key-fill.svg";
import "../node_modules/bootstrap-icons/icons/envelope.svg";
// webpack automatically bundles all modules in your // webpack automatically bundles all modules in your
// entry points. Those entry points can be configured // entry points. Those entry points can be configured
@ -36,6 +37,7 @@ import "bootstrap/js/dist/dropdown";
import "bootstrap/js/dist/alert"; import "bootstrap/js/dist/alert";
// Boostrap helpers // Boostrap helpers
import "./_hamburger-helper"; import "./_hamburger-helper";
import "./_form-validity";
import { AlertRemover } from "./_alert-remover"; import { AlertRemover } from "./_alert-remover";
// LiveSocket setup // LiveSocket setup

View file

@ -7,7 +7,7 @@
</h3> </h3>
<p class="lead">Who goes there?</p> <p class="lead">Who goes there?</p>
<%= form_for @conn, Routes.user_session_path(@conn, :create), [as: :user], fn f -> %> <%= form_for @conn, Routes.user_session_path(@conn, :create), [as: :user, class: "needs-validation", novalidate: true], fn f -> %>
<%= if @error_message do %> <%= if @error_message do %>
<div class="alert alert-danger alert-dismissible fade show" role="alert"> <div class="alert alert-danger alert-dismissible fade show" role="alert">
<%= @error_message %> <%= @error_message %>
@ -22,7 +22,11 @@
</span> </span>
<%= email_input f, :email, <%= email_input f, :email,
class: "form-control", class: "form-control",
required: true %> placeholder: "e.g., babka@73k.us",
maxlength: User.max_email,
required: true
%>
<span class="invalid-feedback">must be a valid email address</span>
</div> </div>
<%= label f, :password, class: "form-label" %> <%= label f, :password, class: "form-label" %>
@ -32,7 +36,9 @@
</span> </span>
<%= password_input f, :password, <%= password_input f, :password,
class: "form-control", class: "form-control",
required: true %> required: true
%>
<span class="invalid-feedback">password is required</span>
</div> </div>
<div class="form-check mb-3"> <div class="form-check mb-3">

View file

@ -1,3 +1,4 @@
defmodule Bones73kWeb.UserSessionView do defmodule Bones73kWeb.UserSessionView do
use Bones73kWeb, :view use Bones73kWeb, :view
alias Bones73k.Accounts.User
end end