Javascript php表单验证问题

Question

所以这是我的问题。如果你按照图片。简单的形式。点击名字。名称向下移动下划线。你填写姓名然后去下一个。它给出了带有复选标记的漂亮背景。验证效果很好，但问题是图片5.用PHP检查表单后，它返回为错误很好，但蓝色背景消失了，文本在名称占位符后面。有没有人能解决为什么会这样？

静止 点击时 什么时候填满 完成后 在单击之前隐藏错误和名称 点击

我遇到的问题是如果填写了一些内容而忘记填写必填字段。他们填写的输入仍然存在，但隐藏。如果单击该字段，您可以看到它，但我希望它在您第一次填写时保持不变。我知道这可能听起来很混乱，这就是为什么我把代码放在这里。我希望有人可以教我一些知识！

形式。

buffer

在填充选项时保存javascript的页脚。

<?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') ?>

CSS

 <script>

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

    </script>


    </body>
    </html>

最后是验证表格

 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;
        }

我知道有人可以弄明白我搞砸了！

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