Проверка формы работает на одном скрипте, но не на другом, и я не могу понять, почему! JavaScript - PullRequest
Новая
       15

Проверка формы работает на одном скрипте, но не на другом, и я не могу понять, почему! JavaScript

0 голосов
/ 25 января 2020

Я пытаюсь узнать, как выполнять проверку формы и выяснить, как делать определенные вещи, я попробовал это на одном из сценариев, чтобы посмотреть, могу ли я установить правила для имени и пароля. Затем я перешел к исходному сценарию формы, чтобы применить к нему форму проверки, и я не могу заставить ее работать. Есть идеи, почему?

Пробная проверка формы: 

const name = document.getElementById('userID')
const password = document.getElementById('password')
const form = document.getElementById('form')
const errorElement = document.getElementById('error')

form.addEventListener('submit', (e) => {
  let messages = []
  if (name.value === '' || name.value == null) {
    messages.push('Name is required')
  }

  if(name.value.length <= 6) {
    alert('name must be longer than 6 characters')
  }

  if (password.value.length <= 6) {
    messages.push('Password must be longer than 6 characters')
  }

  if (password.value.length >= 20) {
    messages.push('Password must be less than 20 characters')
  }

  if (password.value === 'password') {
    messages.push('Password cannot be password')
  }

  if (messages.length > 0) {
    e.preventDefault()
    errorElement.innerText = messages.join(', ')
  }
})

скрипт, над которым он работал (но мне просто нужно заменить идентификаторы, чтобы он работал) 

<script defer src="formCheck.js"></script>
</head>

<div id="error"></div>
<form id="form" action="/" method="GET">
  <div>
    <label for="name">Name</label>
    <input id="name" name="name" type="text" required>
  </div>
  <div>
    <label for="password">Password</label>
    <input id="password" name="password" type="password">
  </div>
  <input class="btn" type = "submit" value="upload" name = "UploadButton">
</form>

Мой оригинальный скрипт, над которым я не могу заставить его работать: 

<head>
    <script defer src="formCheck.js"></script>
    <title> Create User!</title>
    <link rel="stylesheet" href="/static/style.css">
</head>

<div class="userForm">


    <h1>
    Create User!
    </h1>
    <div id="error"></div>
    <form method = "post"  id="form" enctype = "multipart/form-data" action="/getUserInfo" name = "form">

    <!-- /AddUser/:userID/:userName/:userGender/:userSeniority/:userHouse/:userLogin/:userPassword -->

    <div class="txtb">
        <label>User ID:</label>
        <input type = "text" id="userID" name = "userID" value = "" placeholder="Enter ID" required>
    </div>

    <div class="txtb">
        <label>User Name:</label>
        <input type = "text" id="userName" name = "userName" value = "" placeholder="Enter Name" required>
    </div>

    <div class="txtb">
        <label>User Gender:</label>
        <select type = "text" placeholder = "Choose Gender" data-style="btn-info" name="userGender" required>

            <option value="male">Male</option>
            <option value="female">Female</option>

        </select>
    </div>

    <div class="txtb">
        <label>User Nationality:</label>
        <input type = "text" name = "userNationality" value = "" placeholder="Enter Nationality" required>
    </div>

    <!-- <div class="txtb">
        <label>User Occupation:</label>
        <select type = "text" placeholder = "Choose Occupation" data-style="btn-info" name="userOccupation">

            <option value="a">A</option>
            <option value="b">B</option>
            <option value="c">C</option>
            <option value="d">D</option>
            <option value="e">E</option>

        </select>
    </div> -->

    <div class="txtb">
        <label>User House:</label>
        <select type = "text" placeholder = "Choose House" data-style="btn-info" name="userHouse" required>

            <option value="0">Red</option>
            <option value="1">Blue</option>
            <option value="2">Green</option>
            <option value="3">Purple</option>

        </select>
    </div>

    <div class="txtb">
        <label>User Login:</label>
        <input type = "text" name = "userLogin" value = "" placeholder="Enter Login" required>
    </div>

    <div class="txtb1">
        <label>User Property:</label>
        <input type = "text" name = "userProperty" value = "" placeholder="Enter Property" required>
    </div>

    <div class="txtb1">
        <label>User Department:</label>
        <input type = "text" name = "userDepartment" value = "" placeholder="Enter Department" required>
    </div>

    <div class="txtb1">
        <label>User Position:</label>
        <input type = "text" name = "userPosition" value = "" placeholder="Enter Position" required>
    </div>   

    <div class="txtb1">
        <label>User Date Of Joining:</label>

        <label>Month:</label>
        <input type="number" min="1" max="12" step="1" name="userMonth" oninput="(validity.valid)||(value='');" required>

        <label>Day:</label>
        <input type="number" min="1" max="31" step="1" name="userDay" oninput="(validity.valid)||(value='');" required>

        <label>Year:</label>
        <input type="number" min="2020" max="2999" step="1" name="userYear" oninput="(validity.valid)||(value='');" required>

    </div>

    <div class="txtb">
        <label>Profile Picture:</label>
        <input type = "file" name = "picture" required>
    </div>

    <input class="btn" type = "submit" value="upload" name = "UploadButton">

    </form>



    <form method = "get" enctype = "multipart/form-data" action="/mainPage">   
        <input class = "btn" type = "submit" value="Main Page">
    </form>

</div>
...