Question

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

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

这是我的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"); }

以下是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>

如果您还需要我的其他信息，请告诉我

Answer 1

看看jquery validate documentation 你需要在表单上调用validate方法。

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

Answer 2

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

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

首先，让我们从表单开始。将onsubmit-listener添加到form-tag：

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

其次，添加一个javascript函数来处理AJAX请求：

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

Answer 3

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

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

3 个答案: