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

我认为$（＆＃34;用户名＆＃34;）。borderColor =＆＃34; red＆＃34 ;;如果错误，您可以为这些元素定义一个id并使用

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

表单验证以显示要突出显示的重复数据字段

1 个答案: