php - JQUERY-样式验证

Question

我有一个现有的表格。我想将输入字段的边框颜色从红色更改为绿色，并在放置字段下显示错误消息。

更准确地说，类似这样的东西:

将此样式应用于错误消息的任何想法、插件或方法。 我目前正在使用以下内容:

.error {
    background-color: #e86065;
    color: black;
    display:inline-block;
    font: 0.5em;
    height: 1.05em;
    }
    
    b#email{
    margin-left: 30px;    
    }

  input#pass1:invalid {
  border: 1px solid red;
}

   input#pass1:valid {
  border: 1px solid green;
}

input#pass1:required{
    background:transparent;
    border-radius: 5px;
    
}

   <form id="myform " class="Form" method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" accept-charset="utf-8">

                <!--                    <div id="first">-->
                <input type="email" id="email" name="email" placeholder="Email Address" value="" required >
                <br>
                <br>
                <br>
                <span class="error"><?php echo $c_emailErr; ?></span>
                <br>

                <figure>
                    <input class ="login-field" type="text" id="pass1" name="pass1" value="" placeholder="Password"  maxlength="30" required>
                    <br>
                    <span class="error"><?php echo $c_pass1Err; ?></span>
                    <br>
                    <input class ="login-field" type="password" id="pass2" name="pass2" value="" placeholder=" Confirm password" maxlength="30" required><!--<span class="error"><?php //echo $c_pass2Err;              ?></span>-->
                    <div id="messages"></div>
                </figure>
                <p class="remember_me">
                </p>
                <input type="submit" name="submit" value="Register" id="submit_button" class="btn btn-default">
                <br>
            </form>

PHP

  <?php
    $c_emailErr = $c_pass1Err = $c_pass2Err = "";

 if (isset($_POST['submit'])) {
 $c_email = $_POST['email'];
 $c_pass1 = $_POST['pass1'];
 $c_pass2 = $_POST['pass2'];

    //Checking the email address
        if (!filter_var($c_email, FILTER_VALIDATE_EMAIL) === false) {

        } else {
           $c_emailErr = ("<b> Email is not a valid email address</b>");
        }

        if (strlen($c_pass1) <= '8') {
            $c_pass1Err = "<b>Your Password Must Contain At Least 8 Characters!</br>";
            //check passwords
        } elseif ($c_pass1 == $c_pass2) {



            $q = "INSERT INTO Cus_Register(Cus_Email,Cus_Password,Cus_confirm_password) VALUES (?,?,?)";
            $stmt = mysqli_prepare($dbc, $q);
            mysqli_stmt_bind_param($stmt, 'sss', $c_email, $c_pass1, $c_pass2);
          if ($q) {
                echo "<script> alert('registration sucessful')</script>";
            }
        } else {
            echo "<b>Oops! Your passwords do not </b>";
        }
    }

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

Answer 1

 $(function(){
	 $("#submit").on("click",function(e){
		 e.preventDefault();
		 var fname = $("#fname").val();
		 if( isNaN(fname) !== false && fname !=="" )
		 {
			$("#fname").removeClass("error");
			$("#fname").addClass("success");
			$(".msg").html("<font color='green'>Input with success</font>");
			return false;
		 }
		 else{
			 $("#fname").removeClass("success");
			 $("#fname").addClass("error");
			 $(".msg").html("<font color='red'>Input with error</font>");
			 return false;
		 }
	}) 
  });

.success{
	  border:1px solid green ;
  }
  .error{border:1px solid red ; }
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="container">
  <h2>Form Shows Dynamic JQuery Validation</h2>
  <form  method="POST">
    <div class="form-group">
      <label for="fname">First Name:</label>
      <input type="text" class="form-control" id="fname" name="fname" placeholder="First Name">
	  <div class="msg"></div>
    </div>
    <button type="submit" class="btn btn-default" id="submit">Submit</button>
  </form>
</div>