出现错误时，将输入字段更改为其他颜色

I have setup a php login page using bootstrap. I want to change the input fields to red when the fields are left empty, invalid email, or username is already in use. Currently when the user clicks register it opens a new page with these messages.

我已经使用bootstrap设置了一个php登录页面。当字段留空,无效的电子邮件或用户名已被使用时,我想将输入字段更改为红色。目前,当用户单击注册时,它将打开包含这些消息的新页面。

How do I just change the input fields to red and display the message in the input field?

如何将输入字段更改为红色并在输入字段中显示消息?

Here is my PHP code:

这是我的PHP代码:

require("config.php");
if(!empty($_POST)) 
{ 
    // Ensure that the user fills out fields 
    if(empty($_POST['username'])) 
    { die("Please enter a username."); }
    if(!filter_var($_POST['username'], FILTER_VALIDATE_EMAIL)) 
    { die("Invalid E-Mail Address"); }  
    if(empty($_POST['password'])) 
    { die("Please enter a password."); } 

    // Check if the username is already taken
    $query = " 
        SELECT 
            1 
        FROM users 
        WHERE 
            username = :username 
    "; 
    $query_params = array( ':username' => $_POST['username'] ); 
    try { 
        $stmt = $db->prepare($query); 
        $result = $stmt->execute($query_params); 
    } 
    catch(PDOException $ex){ die("Failed to run query: " . $ex->getMessage()); } 
    $row = $stmt->fetch(); 
    if($row){ die("This email address is already registered"); }

Here is the HTML code:

这是HTML代码:

<div class="container hero-unit">        
<div class="row" style="margin-top:20px">
    <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">
        <form action="register.php" method="post" role="form">
            <fieldset>
                <h2>Please Register</h2>
                <hr class="colorgraph">
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6">
                        <a href="#" class="btn btn-lg btn-facebook btn-block"><i class="fa fa-facebook"></i> &nbsp;Sign in with Facebook</a>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6">
                        <a href="#" class="btn btn-lg btn-info btn-block"><i class="fa fa-twitter"></i> &nbsp;Sign in with Twiter</a>
                    </div>
                </div>
                <div class="login-or">
                    <hr class="hr-or">
                    <span class="span-or">or</span>
                </div>
                <div class="form-group">
                    <input type="email" name="username" id="email" class="form-control input-lg" placeholder="Email Address" value="<?php echo $submitted_username; ?>">
                </div>
                <div class="form-group">
                    <input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password">
                </div>
                <hr class="colorgraph">
                <div class="row">
                    <div class="col-xs-6 col-sm-6 col-md-6">
                        <input type="submit" class="btn btn-lg btn-primary btn-block" value="Register" /> 

                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6">
                        <a href="index.php" class="btn btn-lg btn-info btn-block">Sign In</a>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>

If you need anything else from me please let me know

如果您需要我的任何其他信息,请告诉我

3 个解决方案

#1

Take a look at the jquery validate documentation you need to call the validate method on the form.

查看在表单上调用validate方法所需的jquery验证文档。

<script>
$("#formId").validate();
</script>

#2

Well, the complete solution to this will be pretty long and based on more than we know at the moment. If I understood you correct, the check should be done when the form is submitted (before leaving the page). This requires AJAX.

那么,对此的完整解决方案将是相当长的,并且基于我们目前所知的更多。如果我理解你是正确的,那么应该在提交表格时(离开页面之前)进行检查。这需要AJAX。

Based on your php script for validation above, I assume that it will just echo anything if there is an error in the validation. Based on that assumption, you could do something like this...

根据您上面验证的PHP脚本,我假设如果验证中存在错误,它将只回显任何内容。根据这个假设,你可以做这样的事......

First, let's start with the form. Add an onsubmit-listener to the form-tag:

首先,让我们从表单开始。在form-tag中添加一个onsubmit-listener:

<form action="register.php" method="post" role="form" onsubmit="return validate_data()">

Second, add a javascript function to handle the AJAX request:

其次,添加一个javascript函数来处理AJAX请求:

This was just written out of the air, so there may be some typos or so - But hopefully you get the idea... ;)

这只是空中写的,所以可能会有一些错别字 - 但希望你能得到这个想法......;)

#3

I fixed my problem by using a plugin that I found here: http://www.jqueryscript.net/form/Powerful-Form-Validation-Plugin-For-jQuery-Bootstrap-3.html

我通过使用我在这里找到的插件解决了我的问题:http://www.jqueryscript.net/form/Powerful-Form-Validation-Plugin-For-jQuery-Bootstrap-3.html

#1