Невозможно отправить форму HTML, подтвержденную классом Javascript - PullRequest
Новая
       14

Невозможно отправить форму HTML, подтвержденную классом Javascript

0 голосов
/ 28 апреля 2020

Я новичок в программировании, особенно JS У меня есть HTML ФОРМА, проверенная с JS КЛАСС, проблема возникает после правильного заполнения всех необходимых полей, но когда я нажимаю кнопку отправки, я получаю сообщение об ошибке, которое запретить отправку формы!

, поскольку мой код не работает, так как предполагалось, какую ошибку я там допустил?

как мне проверить и отправить форму, используя JS CLASS? (объектно-ориентированный javascript) 

<html lang="en-US">
      <head>
       <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=0.1,shrink-to-fit=no">
         <link type="text/css" href="/css" rel="stylesheet">
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
           <title>Javascript Form Validation</title>
            <style>
             </style>
              </head>
               <body>
                <div class="container">
                 <div class="row justify-content-center">
                  <div class="col-sm-6 col-md-6 col-lg-6">
                   <div class="card">
                    <div class="card-body">

    <form method="post" name="myForm" id="myForm">
    <div class="form-group">
    <label for="exampleInputName1">Full name</label>
    <input type="text" class="form-control" name="name" id="exampleInputName1" aria-describedby="nameHelp" placeholder="Enter name">
    </div> 
    <button type="submit" name="login" class="btn btn-primary">Submit</button>
    </form>
    <script>
      class User
                {
                    constructor(userName,submitButton)
                    {
                        this.userName = document.myForm.name.value;
                        this.submitButton = document.getElementById("myForm");
                    }
                    submitForm()
                    {
                        this.submitButton.onsubmit = function()
                        {

                        if(this.userName == "" || this.userName == null)
                        {
                           alert("Name Required");
                            return false;
                            }
                        }
                    }
                }
                let user = new User();
                user.submitForm();
    </script>

Ответы [ 3 ]

0 голосов
/ 28 апреля 2020

Вы получаете начальное значение ввода "name" в вашем конструкторе с этим кодом: 

this.userName = document.myForm.name.value;

Свойство userName вашего класса теперь содержит это начальное значение, которое является пустым. Когда вы проверяете значение в функции onSubmit, свойство userName остается пустым.

Что вам нужно сделать, это получить текущее значение ввода в обработчике onSubmit. Как то так: 

this.userName = document.myForm.name.value;
if (this.userName == "" || this.userName == null)
{
    alert("Name Required");
    return false;
}
0 голосов
/ 28 апреля 2020

Это не работает, потому что вы инициализируете userName в конструкторе, когда ввод пуст, а когда вы проверяете значение userName, он все еще пуст. Вы должны заполнить userName входным значением перед проверкой.

Что-то вроде: 

class User
{
    constructor(userName,submitButton)
    {
        this.userName = document.myForm.name.value;
        this.submitButton = document.getElementById("myForm");
    }

    submitForm()
    {
        this.submitButton.onsubmit = function()
        {
            this.userName = document.myForm.name.value;

            if(this.userName == "" || this.userName == null)
            {
                alert("Name Required");
                return false;
            }
        }
    }
}

let user = new User();
user.submitForm();

Я советую вам создать метод для чтения свойства userName, поскольку оно избыточно

0 голосов
/ 28 апреля 2020

Потому что во время создания объекта пользователя имя пусто.

Вы устанавливаете его только в конструкторе. Вам нужно получить значение при нажатии кнопки submit.

Один из вариантов изменяет его следующим образом: 

<form method="post" name="myForm" id="myForm">
    <div class="form-group">
        <label for="exampleInputName1">Full name</label>
        <input type="text" class="form-control" name="name" id="exampleInputName1" aria-describedby="nameHelp" placeholder="Enter name">
    </div> 
    <button type="submit" name="login" class="btn btn-primary">Submit</button>
</form>
<script>
    class User
    {
        constructor(userName,submitButton)
        {
            this.userName = document.myForm.name.value;
            this.submitButton = document.getElementById("myForm");
        }
        submitForm()
        {
            this.submitButton.onsubmit = function()
            {
                this.userName = document.myForm.name.value;  // <---- Here we reset userName to the input/s current value
                if(this.userName == "" || this.userName == null)
                {
                    alert("Name Required");
                    return false;
                }
            }
        }
    }
    let user = new User();
    user.submitForm();
</script>

Мы повторно устанавливаем userName в обработчике отправки

...