Как мне заставить работать проверку формы?

Я пытаюсь проверить свою форму, но когда я нажимаю «Отправить», она не работает. У меня есть сценарий из 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>









это то, что я надеюсь получить

Как мне заставить работать проверку формы?

Либо поместите код, вызывающий new JustValidate, в скрипт верхнего уровня в HTML, либо в файл .js, который вы загружаете с сервера, но не в то и другое. А если у вас есть тег <script>, который загружает just-validate.js, вам также не нужно его импортировать.

Barmar 21.04.2024 01:05

Вы можете использовать import в скрипте, только если в теге <script> есть type = "module". Разве у вас не было ошибки в консоли, сообщающей вам об этом?

Barmar 21.04.2024 01:06

Просто говоря, вы также можете использовать это для простой проверки. Просто добавьте required в конце тега ввода, чтобы сделать его обязательным. ПРИМЕР: <input type = "text" id = "name" name = "name" required>

Truder 21.04.2024 01:12
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
63
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы используете атрибут 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>

Другие вопросы по теме

Похожие вопросы

PlaywrightCrawler: возврат неудачного запроса обратно в список или очередь. Тайм-аут requestHandler истек через 60 секунд
Использование JavaScript для преобразования/манипулирования данными в облачной форме данных Google (sqlx)
Метод установки useState не меняет мое состояние – реагировать на родной
Как эффективно отключить предупреждение Self-XSS при вставке кода в консоль
Как отключить проверку сборки angular cling в определенном каталоге?
Процедура вызова с параметром из HTML-шаблона в TMS WEB Core
Использование сокращения() изменяет исходный массив в документации JavaScript, утверждающей обратное
Реализация перехода от бегущей линии вперед (CLA) к шаблону поиска области задач в Leaflet.js
Невозможно прочитать свойства неопределенного значения (чтение «0») — проблема API
Как отобразить изображение по умолчанию, только если в этом приложении фильмов Angular 16 нет постера фильма?