Проверка формы PHP с помощью Javascript не останавливается при возврате false

Я пытался сделать простую проверку формы HTML через Javascript

Я уже некоторое время борюсь с этим на нескольких примерах, и независимо от того, что я следую, моя индексная страница продолжает загружаться после нажатия кнопки на форме, я считаю, что я поместил return false в правильные места, чтобы сломать остальная часть выполнения кода, есть идеи, почему это так? «Мой» код ниже

Примечание: я пробовал использовать атрибут novalidate с формой, это деактивирует проверку браузера, но по-прежнему отправляет меня на мою страницу индекса. Идеальная функциональность не должна загружать страницу индекса и оставаться на странице регистрации с предупреждениями под правильными полями ввода.

index.php

<?php
if (isset($_POST["register"]))
{
    $user = $_POST["username"];
    echo "Welcome ".$user;
}

?>

register.php

<!DOCTYPE html>
<html>
    <head>
        <title>Form validation with javascript</title>
        <link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body>
<div id = "wrapper">
    <form novalidate method = "POST" action = "index.php" onsubmit = "return Validate()" name = "vform">
        <div>
            <input type = "text" name = "username" class = "textInput" placeholder = "Username">
            <div id = "name_error" class = "val_error"></div>
        </div>
        <div>
            <input type = "email" name = "email" class = "textInput" placeholder = "Email">
            <div id = "email_error" class = "val_error"></div>
        </div>
        <div>
            <input type = "password" name = "password" class = "textInput" placeholder = "Password">
        </div>
        <div>
            <input type = "password" name = "password_confirmation" class = "textInput" placeholder = "Password confirmation">
            <div id = "password_error" class = "val_error"></div>
        </div>
        <div>
            <input type = "submit" value = "Register" class = "btn" name = "register">
        </div>
    </form>

</div>
</body>
</html>
<!-- Adding javascript -->
<script type = "text/javascript">
    // GETTING ALL INPUT TEXT OBJECTS
    var username = document.forms["vform"]["username"];
    var email = document.forms["vform"]["email"];
    var password = document.forms["vform"]["password"];
    var password_confirmation = document.forms["vform"]["password_confirmation"];

    // GETTING ALL ERROR DISPLAY OBJECTS
    var name_error = document.getElementId("name_error");
    var email_error = document.getElementId("email_error");
    var password_error = document.getElementId("password_error");

    // SETTING ALL EVENT LISTENERS
    username.addEventListener("blur", nameVerify, true);
    email.addEventListener("blur", emailVerify, true);
    password.addEventListener("blur", passwordVerify, true);

    // Validation Function
    function Validate(){
        // Username Validation
        if (username.value == ""){
            username.style.border = "1px solid red";
            name_error.textContent = "Username is required";
            username.focus();
            return false;
        }
        // Email Validation
        if (email.value == ""){
            email.style.border = "1px solid red";
            email_error.textContent = "email is required";
            email.focus();
            return false;
        }
        // Password Validation
        if (password.value == ""){
            password.style.border = "1px solid red";
            password_error.textContent = "password is required";
            password.focus();
            return false;
        }

        // check if the two passwords match
        if (password.value != password_confirmation.value)
        {
            pasword.style.border = "1px solid red";
            pasword_confirmation.style.border = "1px solid red";
            password_error.innerHTML = "The two passwords dont match";
            return false;
        }
    }

    // event handler functions
    function nameVerify(){
        if (username.value != "")
        {
            username.style.border = "1px solid #5E6E66";
            name_error.innerHTML = "";
            return true;
        }
    }

    function emailVerify(){
        if (email.value != "")
        {
            email.style.border = "1px solid #5E6E66";
            email_error.innerHTML = "";
            return true;
        }
    }

function passwordVerify(){
        if (passwprd.value != "")
        {
            passwprd.style.border = "1px solid #5E6E66";
            passwprd_error.innerHTML = "";
            return true;
        }
    }

</script>

style.css

#wrapper{
    width: 35%;
    margin: 50px auto;
    padding: 20px;
    background: #EFFFE0;
}

form{
    width: 50%;
    margin: 100px auto;
}

form div{
    margin: 3px auto;
}

.textInput{
    margin-top: 2px;
    height: 28px;
    border: 1px solid #5E6E66;
    font-size: 16px;
    padding: 1px;
    width: 100%;
}

.btn{
    padding: 7px;
    width: 100%;
}

.val_error{
    color: #FF1F1F;
}

Большое спасибо за любую помощь, которую вы можете предоставить!

Нет ли опечатки в passwprd? внутри функции passwordVerify?

— 28.10.2018 03:29

Ах, да, вы правы, к сожалению, он все еще подталкивает меня к форме индекса при щелчке мышью: /

— 28.10.2018 04:14

Значит, вещь preventDefault.

— 28.10.2018 04:18

Что сказал @ Chay22: замените function Validate(){ на function Validate(event){ и вместо return false; (или перед ними в дополнение) используйте event.preventDefault();, чтобы остановить продолжение события отправки.

— 28.10.2018 06:34

javascript php html

28.10.2018 02:59

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Назначьте идентификатор своей форме, прикрепите к ней событие отправки формы, и если проверка не удалась, вы можете использовать event.preventDefault (); чтобы остановить отправку формы. Попробуйте приведенный ниже код.

<!DOCTYPE html>
<html>
<head>
   <title>Page Title</title>
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>


     <form action = "your_file_name.php" method = "post" id = "myForm">
        First name:<br>
        <input type = "text" name = "firstname"  id = "firstname">
        <br>
        Last name:<br>
        <input type = "text" name = "lastname" id = "lastname" >
        <br><br>
        <input type = "submit" value = "Submit">
    </form>

$( "#myForm" ).submit(function(event) {

 if ($("#firstname").val()== "" || $("#lastname").val()== "") //Your validation conditions.
  {
        alert("Kindly fill all fields.");
        event.preventDefault();
  }
  //submit the form.
    });
   </script>
   </html>

13.11.2018 10:19

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

Получить выполненные sql-запросы в Laravel

Двоичный файл не выполняется для веб-пользователя

ReCaptcha слишком часто отображается в Android WebView

Проблемы с Godaddy - сайт AWS WordPress

Как загрузить изображение в Sylius

Zoho Api Oauth v.2 | Почему он хочет войти в систему при запросе авторизации пользователя?

Symfony 3.3 Ошибка синтаксического анализа: синтаксическая ошибка, непредвиденный ':', ожидание ';' или '{' в c: \ xampp \ htdocs \ myproject \ path \ to \ AnnotationRegistry.php в строке 50

Как я могу вызвать файл master.php из папки, не теряя всех путей?

Для чего используется тег пакета PHPDoc?

Перегруженное соединение mysql

Проверка формы PHP с помощью Javascript не останавливается при возврате false

Ответы 1

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

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