Я пытаюсь проверить свою форму, но когда я нажимаю «Отправить», она не работает. У меня есть сценарий из Just-Validate. Я просто не понимаю, где я мог допустить ошибку
это мой js
import JustValidate from 'just-validate';
const validation = new JustValidate("#signup");
validation
.addField("#name", [
{
rule: "required"
}
]);
это моя форма регистрации
<!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>
это то, что я надеюсь получить
Вы можете использовать import
в скрипте, только если в теге <script>
есть type = "module"
. Разве у вас не было ошибки в консоли, сообщающей вам об этом?
Просто говоря, вы также можете использовать это для простой проверки. Просто добавьте required
в конце тега ввода, чтобы сделать его обязательным. ПРИМЕР: <input type = "text" id = "name" name = "name" required>
Если вы используете атрибут defer
в элементе скрипта, убедитесь, что вы не ссылаетесь на функцию JustValidate
до загрузки DOM (отложите элемент <script>).
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>
Либо поместите код, вызывающий
new JustValidate
, в скрипт верхнего уровня в HTML, либо в файл.js
, который вы загружаете с сервера, но не в то и другое. А если у вас есть тег<script>
, который загружаетjust-validate.js
, вам также не нужно его импортировать.