Question

我一直在尝试通过Javascript进行简单的HTML表单验证

我已经在一些示例上苦苦挣扎了一段时间，无论我遵循什么，在单击表单按钮后，索引页面都会继续加载，我相信我已经在正确的位置放置了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;
}

非常感谢您提供的任何帮助！

Answer 1

为您的表单分配一个ID，向其附加表单提交事件，如果验证失败，则可以使用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>

使用Javascript进行PHP表单验证不会在返回false

1 个答案: