brought session form validation in line with bootstrap styling
This commit is contained in:
parent
db796812ae
commit
ccb67ea3f2
4 changed files with 30 additions and 3 deletions
18
assets/js/_form-validity.js
Normal file
18
assets/js/_form-validity.js
Normal 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
|
||||||
|
);
|
||||||
|
});
|
|
@ -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
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
defmodule Bones73kWeb.UserSessionView do
|
defmodule Bones73kWeb.UserSessionView do
|
||||||
use Bones73kWeb, :view
|
use Bones73kWeb, :view
|
||||||
|
alias Bones73k.Accounts.User
|
||||||
end
|
end
|
||||||
|
|
Loading…
Reference in a new issue