Атрибут действия формы не работает со скриптом js

Я написал простую регистрационную форму с атрибутом действия на HTML, которая, когда пользователь заполняет входные данные он отправляет их в мою базу данных. Все работает нормально, пока я не добавил скрипт проверки с использованием Javascript. Сценарий отлично работает с моими параметрами, но когда я нажимаю кнопку отправки, форма не выполняет атрибут действия. Один из способов, который я придумал, — сделать более простой скрипт внутри моего HTML, но я бы предпочел сохранить его в отдельном файле.

HTML:

                <script defer src = "validation.js">
            .......
                   <form action = "register_user.php" method = "post" id = "formRegister" name = "formRegister" >

                     <div class = "formfield">
                      <table style = "display: inline-table; margin: 0px 12px 0px 12px;" >
                         <tr>
                            <td> Name<b style = "color:red;">*</b> </td>
                            <td>
                                <div class = "input-control">
                               <input type = "text" name = "name" size = "32" id = "name"  >
                               <div class = "error"></div>
                                </div>
                            </td>
                         </tr>

                         <tr>
                            <td> Surename<b style = "color:red;">*</b> </td>
                            <td>
                                <div class = "input-control">
                               <input type = "text" name = "surename" size = "32"  id = "surename" >
                               <div class = "error"></div>
                            </div>
                           </td>
                         </tr>

                         <tr>
                            
                            <td> AMKA<b style = "color:red;">*</b> </td>
                            <td>
                                <div class = "input-control">
                               <input type = "text" name = "amka" size = "32"  id = "amka" >
                               <div class = "error"></div>
                            </div>
                            </td>
                         </tr>

                         <tr>
                            <td> AFM<b style = "color:red;">*</b> </td>
                            <td>
                                <div class = "input-control">
                               <input type = "text" name = "afm" size = "32"  id = "afm" >
                               <div class = "error"></div>
                            </div>
                            </td>
                         </tr>

                         <tr>
                            <td> PID<b style = "color:red;">*</b> </td>
                            <td>
                                <div class = "input-control">
                               <input type = "text" name = "pid" size = "32"  id = "pid">
                               <div class = "error"></div>
                            </div>
                            </td>
                         </tr>

                         <tr>
                            <td> Age<b style = "color:red;">*</b> </td>
                            <td>
                                <div class = "input-control">
                               <input type = "text" name = "age" size = "32"  id = "age">
                               <div class = "error"></div>
                            </div>
                            </td>
                         </tr>

                         <tr>
                            <td> Gender </td>
                            <td>
                                <div class = "input-control">
                               <input type = "text" name = "gender" size = "32">
                                <div class = "error"></div>
                               </div>
                            </td>
                         </tr>

                         <tr>
                            <td> Email </td>
                            <td>
                                <div class = "input-control">
                               <input type = "text" name = "email" size = "32" id = "email">
                               <div class = "error"></div>
                            </div>
                            </td>
                         </tr>

                         <tr>
                            <td> Mobile Phone<b style = "color:red;">*</b> </td>
                            <td>
                                <div class = "input-control">
                               <input type = "text" name = "mphone" size = "32"  id = "mphone">
                               <div class = "error"></div>
                            </div>
                            </td>
                         </tr>

                        <tr>
                    <td> Role<b style = "color:red;">*</b> </td>

                         <td>
                            <div class = "dropdown">
                                <div class = "input-control">
                             <select  id = "dropdown" name = "dropdown">
                                 <option value= "">Select...</option>
                                 <option value = "1">Civilian</option>
                                 <option value = "2">Doc</option>
                                </select>
                                <div class = "error"></div>
                             </div>
                              </div>
            </td>
                   </tr>

                      </table>

                      <br><br>

                      <button type = "submit" name = "register" > Register </button>

                     </div>

                   </form>

Javascript (валидация.js):

const formRegister = document.getElementById('formRegister');
const nameid = document.getElementById('name');
const surename = document.getElementById('surename');
const amka = document.getElementById('amka');
const afm = document.getElementById('afm');
const pid = document.getElementById('pid');
const age = document.getElementById('age');
const mphone = document.getElementById('mphone');
const dropdown = document.getElementById('dropdown');
const email = document.getElementById('email');

formRegister.addEventListener('submit', e => {
    e.preventDefault();

    validateInputs();
});

const setError = (element, message) => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = message;
    inputControl.classList.add('error');
    inputControl.classList.remove('success')
}

const setSuccess = element => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = '';
    inputControl.classList.add('success');
    inputControl.classList.remove('error');
};

const isValidEmail = email => {
    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}


const validateInputs = () => {
    const nameidValue = nameid.value.trim();
    const surenameValue = surename.value.trim();
    const amkaValue = amka.value.trim();
    const afmValue = afm.value.trim();
    const pidValue = pid.value.trim();
    const ageValue = age.value.trim();
    const mphoneValue = mphone.value.trim();
    const dropdownValue = dropdown.value;
    const emailValue = email.value.trim();



var letters = /^[A-Za-z]+$/;
var symbols = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>/?]+/;
var numbers = /^[0-9]+$/;
//error check
//name
if (nameidValue === ''){
    setError(nameid, 'Error');
}else if (nameidValue.match(letters)){
    setSuccess(nameid);
}else{
    setError(nameid, 'Error');
}
//surename
if (surenameValue === '' ){
    setError(surename, 'Error');
}else if (surenameValue.match(letters)){
    setSuccess(surename);
}else{
    setError(surename, 'Error');
}
//amka
if (amkaValue === ''){
    setError(amka, 'Error');
}else if (amkaValue.length != 11){
    setError(amka,'Error');
}else{
    setSuccess(amka);
}
//afm
if (afmValue === ''){
    setError(afm, 'Error');
}else if (afmValue.length != 9){
    setError(afm,'Error');
}else {
    setSuccess(afm);
}
//pid
if (pidValue === ''){
    setError(pid,'Error');
}else if (pidValue.length != 8){
    setError(pid, 'Error');
}else{
    setSuccess(pid);
}
//age


if (ageValue === ''){
    setError(age, 'Error');
}else {
    setSuccess(age);
}


//mphone
if (mphoneValue === ''){
    setError(mphone,'Error');
}else if (mphoneValue.length != 10){
    setError(mphone, 'Error')
}else {
    setSuccess(mphone);
}
//dropdown
if (dropdownValue == ""){
    setError(dropdown, 'Error');
}else{
    setSuccess(dropdown);
}

    
};

Вам не хватает некоторых /, чтобы закрыть теги <input>.

Mushroomator 22.03.2022 22:11

Входные теги больше не требуют закрытия /.

Daniel Douglas 22.03.2022 22:14

Ок, только что погуглил. Не знал, что мой линтер показывает ошибки, если они не закрыты. Но, кажется, их нужно закрывать только при использовании XHTML.

Mushroomator 22.03.2022 22:19
Поведение ключевого слова "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
28
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Он не отправит форму из-за этой строки:

e.preventDefault();

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

Я предлагаю вам повторно отправить форму после того, как ваша логика проверки будет запущена, если форма действительна.

Спасибо, это действительно сработало. Я постараюсь найти другой способ, чтобы моя форма не отправлялась, пока все поля пусты!

Ion J. 22.03.2022 22:17

Если вы добавите идентификатор к своей кнопке, вы можете вручную вызвать кнопку для отправки после запуска проверки.

Daniel Douglas 22.03.2022 22:38

Вы запрещаете действие браузера по умолчанию для отправки почтового запроса на указанный маршрут. Попробуйте удалить "e.preventDefault" из script.js. Это должно отправить данные на маршрут

Да, я постараюсь как-нибудь обойти это. Но именно это удерживает его от использования атрибута действия.

Ion J. 22.03.2022 22:19

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