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

.success{ 
 
\t 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"> 
 
\t <div class="msg"></div> 
 
    </div> 
 
    <button type="submit" class="btn btn-default" id="submit">Submit</button> 
 
    </form> 
 
</div>