窗體驗證以顯示要突出顯示的重複數據字段

Question

我有一個表單字段，用戶輸入數據。如果用戶輸入了已經存儲在數據庫中的重複數據，並且我已經這樣做，以檢測它是重複數據。但是我想讓用戶輸入的重複數據顯示爲紅色，表示該用戶名已經存在，並且他輸入了突出顯示爲紅色的重複數據的字段。我已經寫了一個JavaScript函數來獲取數據庫中的所有數據，並且這樣做。它無法突出顯示用戶輸入重複數據的字段紅色。 任何幫助將深表謝意。

{% extends "base.html" %} 
{% block head %} 
<script src="{{ url_for('static', filename = 'user.js') }}"></script> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<style> 
    .buttonalign{ 
        margin-top: 20px; 
       } 
</style>  
{% endblock %} 
{% block content %} 
<div class= "content" style="z-index: 1"> 
    <div class="row"> 
     <div class="wrapper col-md-offset-4 col-md-4 col-md-offset-4"> 
      <form action="/auth/add_users" method="post" name="Add_Form">  
       <h3 class="text-center">Add User</h3> 
       <hr> 
       <div class="form-group"> 
        <h4> Username </h4> 
        <input type="text" class="form-control Email/Username" name="username" id="username" placeholder="username" required="true" autofocus="" /> 
       </div> 
       <div class="form-group"> 
        <h4> Password </h4> 
        <input type="password" class="form-control Password" name="password" id="password" placeholder="password" required="true"/>    
       </div> 
       <div class="form-group"> 
        <h4> Email </h4> 
        <input type="email" class="form-control Email/Username" name="email" id="email" placeholder="email" required="true" autofocus="" /> 
       </div> 
       <div class="form-group"> 
        <h4> Site_url </h4> 
        <input type="text" class="form-control site_url" name="site_url" id="site_url" placeholder="site_url" required="true" autofocus="" /> 
       </div> 
       <div class="buttonalign"> 
        <button class="btn btn-sm btn-primary btn-block" name="Submit" value="Submit" type="Submit" id="submit">Submit</button> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 
<div class="content" style="z-index: 999; position: absolute; right: 240px; top: 10px;" >  
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="panel panel-primary" id="box" style="display:none;"> 
       <div class="panel-heading"> 
       <button type="button" class="close" data-target="#box" data-dismiss="alert"> 
        <span aria-hidden="true">&times;</span><span class="sr-only">X</span> 
       </button> 
        Subscribers 
       </div> 
       <div class="panel-body" style="max-height: 500px; overflow-y: scroll;"> 
        <div id = "show-json-result"></div> 
        <input type="hidden" id = "userid" value="{{current_user.id}}"/> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<script> 

$("#username").focusout(function() { 
    username = $(this).value; 
    $.ajax({ 
     method: "GET", 
     url: "/auth/get_users", 
     data: { username: "username" } 
    }).done(function(response) { 
     <!-- console.log(":::::"); --> 
     if(response == "username"){ 
     console.log($username); 
     $("username").borderColor = "red"; 
     } 
    }); 
}); 

$("#email").focusout(function() { 
    email = $(this).value; 
    $.ajax({ 
     method: "GET", 
     url: "/auth/get_users", 
     data: { email: "email" } 
    }).done(function(response) { 
     if(response == "email"){ 
     $("email").borderColor = "red"; 
     } 
    }); 
}); 

$("#site_url").focusout(function() { 
    site_url = $(this).value; 
    $.ajax({ 
     method: "GET", 
     url: "/auth/get_users", 
     data: { site_url: "site_url" } 
    }).done(function(response) { 
     if(response == "site_url"){ 
     $("site_url").borderColor = "red"; 
     } 
    }); 
}); 

</script> 

{% endblock %} 

Answer 1

我覺得$（「username」）。borderColor =「red」;;是錯誤的，您可以爲該元素定義一個ID並使用

$("#username").css("border-color","red");