I'm trying to validate my form but when I press submit it's not working. I have the script from Just-Validate. I just don't see where I could have made a mistake
this is my js
import JustValidate from 'just-validate';
const validation = new JustValidate("#signup");
validation
.addField("#name", [
{
rule: "required"
}
]);
this is my signup form
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css">
<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
<script src="https://unpkg.com/just-validate@latest/dist/just-
validate.production.min.js" defer></script>
<script type="text/javascript" src="js/validation.js" defer></script>
</head>
<body>
<h1>Signup</h1>
<form action= "process-signup.php" method = "post" id="signup" novalidate>
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="email">Email</label>
<input type = "email" id = "email" name = "email">
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" name="password">
</div>
<div>
<label for="password_confirmation">Repeat password</label>
<input type="password" id="password_confirmation" name="password_confirmation">
</div>
<button>Sign up</button>
</form>
<script>
const validate = new window.JustValidate("#signup");
</script>
</body>
</html>
this is what I'm hoping to get
If using the defer
attribute on the script element, make sure that you don't refer the JustValidate
function before the DOM is loaded (defer
on the <script>
element).
document.addEventListener('DOMContentLoaded', e => {
const validation = new JustValidate("#signup");
validation.addField("#name", [{
rule: "required"
}]);
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exampledev/new.css@1/new.min.css">
<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
<script src="https://unpkg.com/just-validate@latest/dist/just-validate.production.min.js"
defer></script>
<h1>Signup</h1>
<form action="process-signup.php" method="post" id="signup" novalidate>
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email" name="email">
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" name="password">
</div>
<div>
<label for="password_confirmation">Repeat password</label>
<input type="password" id="password_confirmation" name="password_confirmation">
</div>
<button>Sign up</button>
</form>