Javascript php表单验证问题

Question

所以这是我的问题。如果你按照图片。简单的模式。点击名称。名称向上移动下划线拉过。您填写名称然后转到下一步。它提供了一个带有复选标记的漂亮背景。验证效果很好，但问题出在图 5。用 php 检查表单后，它返回错误，这很好，但蓝色背景消失了，文本位于名称占位符后面。有没有人可以解决为什么会发生这种情况？

休息 点击时 填满时 完成时 错误和名称在单击之前被隐藏 点击

我遇到的问题是，如果填写某些内容而忘记填写必填字段。他们填写的输入仍然存在，但被隐藏了。如果您单击该字段，您可以看到它，但我希望它保持与您第一次填写时一样。我知道这听起来可能令人困惑，这就是我将代码放在这里的原因。我希望有人能教我一些知识！

表格。

<?php include('validate.php');?>

            <?php include('header.php') ?>

              <form id="contact_form" class="contact_form" action="contact.php" 
    id="contact_form" method="post">

                   <h2>Have a Question?</h2>

                  <div class="textinput <?php echo $nameErr ?>">
                        <?php
                            if(!empty($nameErr))
                            {
                        ?>
                      <div class="requiredline">
                      </div>
                      <?php
                            }
                        ?>
                <div class="textinput ">
              <input name="Name" type="text" id="Name" 
placeholder="First & Last" 
value="<?php echo (isset($Name) ? $Name : ""); ?>" />
              <label for="Name">Name</label><div class="labelunderline"></div>
                  </div><span class='text_error'><?php echo $nameErr;?></span>



                      <div class="textinput <?php echo $nameErr ?>">
                        <?php
                            if(!empty($nameErr))
                            {
                        ?>
                      <div class="requiredline">
                      </div>
                      <?php
                            }
                        ?>
                  <div class="textinput">
              <input name="Email" type="text" id="Email" 
        placeholder="Email@mail.com" value="<?php echo (isset($Email) ? $Email : ""); ?>" />
              <label for="Email">Email</label>
        <div class="labelunderline"></div><!--END LABEL UNDERLINE-->
                  </div><span class='text_error'><?php echo $emailErr;?></span>

                  <div class="textinput ">
              <input type="text" id="Message" placeholder="Write what you feel" />
              <label for="Message">Message</label><div class="labelunderline"></div>
                  </div>

                <div class="input-wrap">
                  <button id="submit" name="submit" type="submit" value="SUBMIT"
     class="col-xs-12 col-sm-8 col-md-6">Submit</button>
                </div>

              </form><!--END FORM-->

            <?php include('footer.php') ?>

填充选项后的javascript的页脚。

 <script>

    $(".textinput input").change(function() {
      if ($(this).val() != "") {
        $(this).addClass('filled');
      } else {
        $(this).removeClass('filled');
      }
    })

    </script>


    </body>
    </html>

css

 body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        }



        /*============CONTACT PAGE=====================*/

        #contact_header_text {
            width: 100%;
            height: 55vh;
            padding-top: 135px;
            font-family: Raleway-reg;
            font-size: 2.5em;
            color: white;
            background-image: 
    linear-gradient(0deg, rgba(0, 79, 88, 0.5),
 100%, rgba(0, 0, 0, 0.0)), url("../images/IMG_1464.jpg");
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: top center;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            background-color: #dbdbdb;
        }

        #contact_section {
            text-align: center;
            font-size: 1.5em;
            color: #333;
            font-family: Raleway-reg;
            background-color: #fff;  
        }

        #contact_form {
            max-width: 1200px;
            margin: 0px auto 0px auto;
            padding-top: 35px;
            padding: 20px;
        }

        ::-webkit-input-placeholder {
          text-align: right;
          font-family: Raleway-reg;
          font-style: italic;
            font-weight: bold;
          color: #096771;
          font-size: 15px;
        }

        ::-moz-placeholder {
          text-align: right;
          font-family: Raleway-reg;
          font-style: italic;
            font-weight: bold;
          color: #096771;
          font-size: 15px;
        }

        button {
          background: #3eacb8;
          border: none;
          border-radius: 2px;
          color: #fff;
          padding: 25px;
          font-size: 14px;
          font-weight: bold;
          text-transform: uppercase;
          text-align: center;
          vertical-align: middle;
          font-family: Raleway-med;
          margin-bottom: 30px;
          letter-spacing: 3px;

        }

        button:hover {
            background-color: #096771;
            transition: 0.5s all;
            text-decoration: none;
            letter-spacing: 6px;
        }


        label {
          top: 10px;
          position:absolute;
          left: 35px;
          transition: all 0.8s ease-in-out;
        }

        .textinput {
          height: 3em;
          margin: 1em 0;
          position: relative;
          width: 100%;
        }

        .textinput input,
        .textinput label {
          cursor: pointer;
          font-size: 1.25em;
          font-family: Raleway-reg;
          text-align: left;
          padding: 0.6em 1% 0.15em 1%;
          /*
          position: absolute;
          */
          transition: all 0.15s ease;
          width: 100%;
        }

        .labelunderline {
          height: 1px;
          width: 100%;
          background-color: #3eacb8;
          position: absolute;
          bottom: 3px;
          left: 0;
        }

        .textinput input {
           text-decoration: none;
            position: relative;
            display: inline-block;
            border-bottom: 3px solid transparent;
            border-left: none;
            border-top: none;
            border-right: none;
            width: 0%;
            float: left;
            transition: 0.5s ease;
            white-space: nowrap;   
        }

        .textinput input:focus {
            border-bottom: 3px solid #096771;
            width: 100%;
        }

        .textinput input.filled {
            width: 100%;
        }

        .textinput label {
          color: #3eacb8;
          padding: 0.6em 0;
          margin-left: -1em;
        }

        .textinput input.filled ~ label,
        .textinput input:focus ~ label {
          font-size: 0.6em;
          font-weight: 600;
          margin-top: -15px;
          position: absolute;
        }

        .textinput input.filled ~ label {
          color: #096771;
        }

        .textinput input[type="text"].filled,
        .textinput input[type="email"].filled:valid {
          background: #3eacb8;
          color: white;
          opacity: 0.4;
        }

        /*=================CHECKMARK========================*/
        .textinput input[type="text"].filled ~label:after,
        .textinput input[type="email"].filled:valid ~label:after {
          color: #096771;
          content: "\f058";
          display: inline-block;
          font: normal normal normal 14px/1 FontAwesome;
          font-size: 3em;
          text-rendering: auto;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          position: absolute;
          top: 15px;
          right: 35px;
          transform: translate(0, 0);
        }


        .error {
            /*
            text-align: left;
            margin-top: 5px;
            */
            color: #FF0000;
            font-family: pathwaygothic;
            /*
            display: block;
            background-image:url(../images/x.png);
            background-repeat: no-repeat;
            background-position: left;
            padding-left: 30px;
            */
        }

        .text_error {
            text-align: left;
            margin-top: -15px;
            color: #FF0000;
            display: block;
            font-family: pathwaygothic;
            background-image:url(../images/x.png);
            background-repeat: no-repeat;
            background-position: left;
            padding-left: 30px;
        }

        div.error {
            text-align: left;
            font-size: 19px;
            margin-top: 5px;
            background-image:url(../images/x.png);
            background-repeat: no-repeat;
            background-position: left;
            padding-left: 30px; 
            margin-left: 25px;
        }

        .requiredline {
            height: 4px;
            width: 100%;
            position: absolute;
            bottom: 0px;
            left: 0;
            background-color: red;
        }

最后是验证表单

<?php
        session_start();
            // define variables and set to empty values
            $nameErr = $emailErr = $phoneErr = $describeErr = $humanErr = $subjectmatterErr = "";
            $Name = $Email = $Phone = $Describe = $Human = 
$Subjectmatter = "";

            $hasError = false;
            $sent = false;

            if(isset($_POST['submit'])) {
                $Name                = trim(htmlspecialchars($_POST['Name'], ENT_QUOTES));
                $Email               = trim($_POST['Email']);
                $Describe            = trim(htmlspecialchars($_POST['Describe'], ENT_QUOTES));
                $Phone               = trim($_POST['Phone']);
                $Company             = trim($_POST['Company']);
                $Website             = trim($_POST['Website']);
                $Subjectmatter       = trim($_POST['Subjectmatter']);
                $Human               = trim($_POST['Human']);
                $Number              = 8;        

                $fieldsArray = array(
                    'Name' => $Name,
                    'Email' => $Email,
                    'Describe' => $Describe,
                    'Phone' => $Phone,
                    'subjectmatter' => $Subjectmatter,
                    'Human' => $Human
                );

                $errorArray = array();

                foreach($fieldsArray as $key => $val) {
                    switch ($key) {
                        case 'Name':
                            if(empty($val)) {
                                $hasError = true;
                                $nameErr = "Please enter your name.";
                            }
                        case 'Name':
                            if (!preg_match("/^[a-zA-Z ]*$/", ($val))) {
                                $hasError = true;
                                $nameErr = "The value must be alphanumeric."; 
                            }
                            break;
                        case 'Phone':
                            if (!preg_match("/^[0-9]+$/", ($val))) {
                                $hasError = true;
                                $phoneErr = "Only numbers and white space allowed.";
                            }
                        case 'Phone':
                            if(empty($val)) {
                                $hasError = true;
                                $phoneErr = "Phone is required.";
                            }
                            break;
                        case 'Subjectmatter':
                            if(empty($val)) {
                                $hasError = true;
                                $subjectmatterErr = "Subject is required.";
                            }
                            break;
                        case 'Email':
                            if(!filter_var($Email, FILTER_VALIDATE_EMAIL)) {
                                $hasError = true;
                                $emailErr = "Email is required.";
                            } else {
                                $Email = filter_var($Email, FILTER_SANITIZE_EMAIL);
                            }
                            break;
                        case 'Describe' :
                            if (strlen($val) < 25) {
                                $hasError = true;
                                $describeErr = "Please enter at least 25 characters. 
    This way I know more specifically what you need!";
                            }
                        case 'Describe' :
                            if(empty($val)) {
                                $hasError = true;
                                $describeErr = "Message is required. 
    This way I know what you need!";
                            }
                            break;
                        case 'Human':
                            if (!preg_match("/[^\d]?8[^\d]?/", ($val))) {
                                $hasError = true;
                                $humanErr = "Not the right answer";
                            }
                        case 'Human':
                            if (!preg_match("/^[0-9]+$/", ($val))) {
                                $hasError = true;
                                $humanErr = "Must be a number";
                            }
                        case 'Human':
                            if(empty($val)) {
                                $hasError = true;
                                $humanErr = "Are you human?";
                            }
                            break;
                    }
                }

                //Validation Success!
                //Do form processing like email, database etc here
                if($hasError !== true) {
                    $priority = $_POST['priority'];
                    $type = $_POST['type'];
                    $message = $_POST['message'];

                    $formcontent=" From: $Name \n Company: $Company \n 
    Email: $Email \n Phone: $Phone \n 
    Website: $Website \n Subject: $Subjectmatter 
    \n Describe: $Describe \n\n";
                    $recipient = "email@email.com";
                    $subject = "Contact Form";
                    $mailheader = "From: $Email \r\n";
                    mail($recipient, $subject, $formcontent, 
$mailheader /*$message, $headers*/);
                    header("Refresh:0; url=thanks.php");
                    exit();       
                }
            }

        ?><!--END PHP-->

我知道有人能弄清楚我在哪里搞砸了！

Answer 1

问题是蓝色背景来自change 事件处理程序，它在输入中添加和删除“填充”类，但是当您重新加载页面时没有人调用它。

为了让事情变得简单，我建议你重构你的 javascript 并调用它 $(document).ready.

试试这个

$(document).ready(function(){

    function checkInput(elem){
      if ($(elem).val() != "") {
        $(elem).addClass('filled');
      } else {
        $(elem).removeClass('filled');
      }

    }

    $(".textinput input").change(function() {
      checkInput(this);
    });

    $(".textinput input").each(function(){
        checkInput(this);
    });
}

否则你可以在php端做。然后在每个输入中，您必须检查该字段是否具有 isset 的值并将该类添加到输入中。

Fiddle