Ustawę stronę logowania PHP za pomocą Bootstrap. Chcę zmienić pola wejściowe na czerwono, gdy pola zostaną pozostawione pusty, nieprawidłowy e-mail lub nazwa użytkownika jest już używana. Obecnie, gdy użytkownik kliknie zarejestrować, otwiera nową stronę z tymi wiadomościami.

Jak po prostu zmienić pola wejściowe na czerwono i wyświetlić komunikat w polu wejściowym?

Oto mój kod 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"); }

Oto kod 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>

Jeśli potrzebujesz czegoś innego, daj mi znać

0
iamthestreets 16 sierpień 2014, 00:30

3 odpowiedzi

Najlepsza odpowiedź

Naprawiłem mój problem, używając wtyczki, którą tutaj znalazłem: http://www.jqueryscript.net /form/powerful-form-Validation-plugin-for-jquery-bootstrap-3.html.

0
iamthestreets 19 sierpień 2014, 18:48

Spójrz na jQuery Sprawdź dokumentację Musisz zadzwonić do metody walidacji w formularzu.

<script>
$("#formId").validate();
</script>
1
dss 15 sierpień 2014, 20:33

Cóż, kompletne rozwiązanie będzie dość długie i oparte na więcej niż wiemy w tej chwili. Jeśli zrozumiałem Cię, czek należy wykonać, gdy formularz zostanie złożony (przed opuszczeniem strony). Wymaga to AJAX.

W oparciu o skrypt PHP w celu walidacji, zakładam, że będzie ona po prostu echo, jeśli wystąpi błąd w walidacji. Na podstawie tego założenia możesz zrobić coś takiego ...

Po pierwsze, zacznijmy od formularza. Dodaj słuchacz Onsubmit do tagu formularza:

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

Po drugie, dodaj funkcję JavaScript, aby obsługiwać żądanie AJAX:

<script type="text/javascript"> function validate_data() { signupRequest = $.ajax({ url: "path/to/your/php/validation/page", type: "post", data: { 'username': $('#email').val(), "password": $('#password').val() } }) .done(function(s) { if (s == '') { // Validation looks ok, login the created user, move on using e.g. top.location.href or do whatever you want... :) } else { var el = $('#email'); $(el).addClass('has_error'); $(el).val(s); }) .fail(function(obj, s) { alert( "error: " + s); }); // Make sure that the form does not submit (we want to stay on this page) return false; } </script>

To było właśnie napisane z powietrza, więc może być jakieś literówki, ale miejmy nadzieję, że dostaniesz pomysł ...;)

0
Carl-Martin Hellberg 15 sierpień 2014, 21:46