Search code examples
javascripthtmlformswindow

How can I get my form validation to work?

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

enter image description here

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

enter image description here

Solution

  • 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>