如果通过php和javascript提交空白，如何更改输入文本颜色？

Question

In index.php I have input area for emailId, php code to show error by user and my in login page I have php code to store user email id in database(mysql). And I don't want user submit blank email id to handle this problem I wrote "if (empty($uemail)){" but I want to show user input area is empty by changing changing border color of input text area into red.

index.php

<input type="email" id="email" name="email" placeholder="Email">

<?php
session_start();
if(isset($_SESSION['error'])){
echo '<script type="text/javascript">   
function downIt() {
document.getElementById("input").style.cssBorder = "color: red";
}
</script>';
}
unset ($_SESSION['error']); 
session_destroy ();
?>

login.php

$uemail = $_POST['email'];
if (empty($uemail)){
$_SESSION['error'];
Header( 'Location: index.php');
exit;
}
else{
query code....here....
}

Answer 1

Why you do not try just HTML5 instead? For example:

<style>
    .was-validated input:invalid {
        border: 1px solid red;
    }
</style>

<script>
    // Bootstrap code
    // Example starter JavaScript for disabling form submissions if there are invalid fields
    (function () {
        'use strict';
        window.addEventListener( 'load', function () {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName( 'needs-validation' );
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call( forms, function ( form ) {
                form.addEventListener( 'submit', function ( event ) {
                    if ( form.checkValidity() === false ) {
                        event.preventDefault();
                        event.stopPropagation();
                    }

                    form.classList.add( 'was-validated' );
                }, false );
            } );
        }, false );
    })();
</script>

<form method="post" action="login.php" class="needs-validation" novalidate>
    <input type="email" id="email" name="email" placeholder="Email" required />
    <br />
    <input type="submit" />
</form>

But if you want to use PHP anyway, I do not see reason to use Javascript.

index.php

<?php
session_start();

$error_border = '';
if ( isset( $_SESSION[ 'error' ] ) ) {
    $error_border = ' style="border: 1px solid red;"';
}

unset ( $_SESSION[ 'error' ] );
?>

    <form method="post" action="login.php">
        <input type="email" id="email" name="email" placeholder="Email"<?php echo $error_border; ?> />
        <br />
        <input type="submit" />
    </form>

<?php session_destroy(); ?>

login.php

<?php
session_start(); // resume existing session

$uemail = $_POST[ 'email' ];
if ( empty( $uemail ) ) {
    $_SESSION[ 'error' ] = 1;
    Header( 'Location: index.php' );
    exit;
} else {
    query code....here....
}