用户端

用户端

关注
发信
关注(28)粉丝(399)

javascript - PHP用户端服务器端输入验证错误

我正在尝试同时进行服务器端和用户端输入验证，但是，当我单击“提交”按钮时，并没有带我进入“谢谢”页面。

我的猜测是，当我使用以下功能时，它将导致问题。

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}

请让我知道问题出在哪里。

index.php
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Contact Us</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/contact_form.css">
    <script type='text/javascript'>
        function validateForm() {

            var err = 0;
            var fields = document.getElementsByClassName("required");

            for (i=0;i<fields.length;i++){
                if (fields[i].value === ""){
                    err += 1;
                    fields[i].style.backgroundColor = "#ebdded";
                    }
                    else{
                    fields[i].style.backgroundColor = "";
                    }
            }

            if(err > 0){
                alert("Please Fill the Required Fields");
            }

            return false;

        }

    </script>
</head>
<body>
    <div class="container">
        <div class="form-wrap">
            <div class="contact-title">
                <div id="circle-container">
                        <div id="circle-effect">
                        <div class="circle" id="fifthLayer"></div>
                        <div class="circle" id="fourthLayer"></div>
                        <div class="circle" id="thirdLayer"></div>
                        <div class="circle" id="secondLayer"></div>
                        <div class="circle" id="firstLayer">Contact Me!</div>
                        </div>
                    </div>
            </div>

            <form name = "_contact_form" class="contact-form" onsubmit="return validateForm()" action="contactform.php" method="POST">
                <div class="div-input-form">
                    <label class="input-label">First Name*: </label>
                    <input id="fname" class="user-input required" type="text" name="firstName" placeholder="First Name">
                </div>

                <div class="div-input-form">
                    <label class="input-label">Last Name*: </label>
                    <input id = "lname" class="user-input required" type="text" name="lastName" placeholder="Last Name">

                </div>

                <div class="div-input-form">
                    <label class="input-label">Email*:</label>
                    <input id = "email" class="user-input required" type="text" name="email" placeholder="Enter email addess">
                </div>

                <div class="div-input-form">
                    <label class="input-label">Phone:</label>
                    <input class="user-input" type="text" name="phone" placeholder="Enter phone number">
                </div>

                <div class="div-input-form">
                    <label class="input-label">Gender:</label>
                    <input type="radio" class="radio-radio" name = "gender" value="Male"> Male </br>
                    <input type="radio" class="radio-radio" name = "gender" value="Female"> Female </br>
                    <input type="radio" class="radio-radio" name = "gender" value="Other"> Other </br> </br>
                </div>

                <div class="div-input-form">
                    <label class="input-label">Occupation:</label>
                    <select name = "dropdown" class="select-occ">
                        <option value="Student">Student</option>
                        <option value="Teacher">Teacher</option>
                    </select>
                </div>

                <div class="div-input-form">
                    <label class="input-label">Age:</label>
                    <input type="radio" class="radio-radio" name = "age" value="18orBelow"> 15 or Below </br>
                    <input type="radio" class="radio-radio" name = "age" value="19to21"> 16 to 20 </br>
                    <input type="radio" class="radio-radio" name = "age" value="21orAbove"> 21 or above </br> </br>
                </div>

                <div class="div-input-form">
                </br>
                    <label class="input-label">How Did You Hear About Us:</label>
                    <input type="checkbox" class="checkbox" name="hearaboutus"> Internet Search<br>
                    <input type="checkbox" class="checkbox" name="hearaboutus"> Friends or Family<br>
                    <input type="checkbox" class="checkbox" name="hearaboutus"> Other<br> </br>
                </div>

                <div class="div-input-form">
                    <label class="input-label">Message*:</label>
                    <textarea id="input_message" class="user-input required" name="message" placeholder="Your Comment..."></textarea>
                </div>

                <div class="div-submit-button" >
                    <button id ='submit' name = 'submit-button' class="submit-button">Submit</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

contactform.php
<?php
  session_start();
  if(isset($_POST['submit-button'])){

    if(empty($_POST["firstName"])) {
      $fnameErr = "First Name is required";
    }else {
      $firstName = strval(test_input($_POST['firstName']));
    }

    if (empty($_POST["lastName"])) {
      $lnameErr = "Last Name is required";
    }else {
      $lastName = strval(test_input($_POST['lastName']));
    }

    if (empty($_POST["email"])) {
      $emailErr = "Last Name is required";
    }else {
      $emailFrom = strval(test_input($_POST['email']));
      if (!filter_var($emailFrom, FILTER_VALIDATE_EMAIL)) {
        $emailErr = "Invalid email format";
     }
    }

    if (empty($_POST["message"])) {
      $mesErr = "Last Name is required";
    }else {
      $message = strval(test_input($_POST['message']));
    }

    $phone = strval(test_input($_POST['phone']));
    $occupation = strval(test_input($_POST['dropdown']));
    $age = strval(test_input($_POST['age']));
    $hearaboutus = strval(test_input($_POST['hearaboutus']));

    $_SESSION['firstname'] = $firstName;
    $_SESSION['lastName'] = $lastName;
    $_SESSION['emailFrom'] = $emailFrom;
    $_SESSION['phone'] = $firstNaphoneme;
    $_SESSION['message'] = $message;
    $_SESSION['occupation'] = $occupation;
    $_SESSION['age'] = $age;
    $_SESSION['hearaboutus'] = $hearaboutus;

    $mailTo = "[email protected]";
    $subjectLine = "E-Mail From: ".$emailFrom."; www.gansaikhanshur.com";
    $emailBody = "You have received an email from ".$firstName."\n\n".$message."\n\n\n";

    mail($mailTo, $subjectLine, $emailBody);
    header("Location: thankupage.php");
}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>

thankupage.php
<?php session_start(); ?>
<!DOCTYPE html>
<html>
  <head>
    <title>Thank You Page!</title>
    <link rel="stylesheet" type="text/css" href="css/support.css">
  </head>
  <body>
    <div class="center">
      <p>Thank You <?php
    include 'contactform.php';
    echo $_SESSION['firstname'];
    session_destroy();
    ?></p>
      <a href="index.php">Go Back</a>
    </div>
  </body>
</html>

的CSS
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body, html {
background: #DCD8D7;
  height: 100%;
  font-family: Helvetica, sans-serif;
}

p {
  font-family: Helvetica;
  font-size: 14px;
  line-height: 1.7;
  color: #616060;
  margin: 0px;
}

input {
  outline: none;
  border: none;
}

textarea {
outline: none;
border: none;
}

.container {
width: 100%;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 10px;
background: transparent;
position: relative;
}

.form-wrap {
width: 770px;
background: #fff;
border-radius: 10px;
overflow: hidden;
position: relative;
}

.contact-title {
width: 100%;
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 64px 15px 64px 15px;
}

.contact-title::before {
content: "";
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(54,84,99,0.7);
}

.contact-form {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 43px 88px 57px 190px;
}

.div-input-form {
width: 100%;
position: relative;
border-bottom: 1px solid #b2b2b2;
margin-bottom: 26px;
}

.input-label {
font-family: Helvetica;
font-size: 15px;
color: #808080;
line-height: 1.2;
text-align: right;

position: absolute;
top: 14px;
left: -105px;
width: 80px;
}

.user-input {
font-family: Helvetica;
font-size: 15px;
color: #525050;
line-height: 1.4;
display: block;
width: 100%;
background: transparent;
padding: 0 5px;
}

input.user-input {
height: 45px;
}

textarea.user-input {
min-height: 115px;
padding-top: 14px;
padding-bottom: 13px;
}

.div-submit-button {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-top: 8px;
}

.submit-button {
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
min-width: 160px;
width: 100%;
height: 50px;
background-color: #3b88bb;
border-radius: 25px;
font-family: Helvetica;
font-size: 16px;
color: white;
line-height: 1.2;
}

.radio-radio
{
   -webkit-appearance: none;
   appearance: none;
   display: inline-block;
   position: relative;
   background-color: #f1f1f1;
   color: rgb(92, 91, 91);
   top: 10px;
   height: 25px;
   width: 25px;
   border: 0;
   border-radius: 40px;
   cursor: pointer;
   margin-right: 7px;
   outline: none;
}
.radio-radio:checked::before
{
   position: absolute;
   font: 13px/1 'Open Sans', sans-serif;
   left: 8px;
   top: 5px;
   content: '\02143';
   transform: rotate(40deg);
}

.checkbox
{
   border-radius: 5px;
   display: inline-block;
   margin-right: 7px;
   height: 10px;
   width: 10px;
}

.select-occ {
display: block;
  font-size: 14px;
  font-family: sans-serif;
  font-weight: 700;
  color: rgb(53, 51, 51);
  line-height: 1.5;
  padding: 7px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #aaa;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  border-radius: 10px;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-repeat: no-repeat, repeat;
  background-position: right .7em top 50%, 0 0;
  background-size: .65em auto, 100%;
}

#circle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35vw;
  height: 35vh;
  position:relative;
}

.circle {
width: 30vh;
  height: 30vh;
  position: absolute;
  border-radius: 50%;
}

#firstLayer {
  font-size: 23px;
  font-family: "Oswald", sans-serif;
  letter-spacing: 1.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  transition: 1s;
}

#secondLayer {
  background-color: #CCCCFF   ;
  transition: 1s;
  opacity: 0.5;
}

#thirdLayer {
  background-color: black;
  transition: 1s;
  opacity: 0.5;
}

#fourthLayer {
  background-color: cornflowerblue;
  transition: 1s;
  opacity: 0.5;
}
#fifthLayer {
  background-color: #FFFF99;
  transition: 1s;
  opacity: 0.5;
}

#circle-effect {
  position:relative;
  width: 30vh;
  height: 30vh;
  border-radius: 50%;
  overflow: hidden;
}

#circle-effect:hover #secondLayer {
  transform: translate(0px, 75px);
}
#circle-effect:hover #thirdLayer {
  transform: translate(0px, -75px);
}
#circle-effect:hover #fourthLayer {
  transform: translate(75px, 0px);
}
#circle-effect:hover #fifthLayer {
  transform: translate(-75px, 0px);
}

最佳答案

尝试在您的contactform.php中进行以下更改

Wrong  -->   $_SESSION['phone'] = $firstNaphoneme;

Right  -->   $_SESSION['phone'] = $phone;

还要在代码的开头添加ob_start()
<?php
    ob_start();
    /*
    Your code
    */
 ?>

关于javascript - PHP用户端服务器端输入验证错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58810626/

10-12 12:59
Powered by LMLPHP ©2024 用户端 0.028388