I need help with my website's login page.

I've already setup the login's backend. It tries to match the input from the input box with the data in the database, which enables users to get into their personal page. But I'm still unable to show an "invalid email address or password" box whenever a user inputs invalid data. I tried to make an AJAX request when the email address or password isn't found in the database, but it still calls the request when the login page loads.

Login page: index.html

<!DOCTYPE html>
<html>
    <head>
 <!-- All the unnecessary codes here -->
    </head>
    <body>
            <form method="post" action="cgi-bin/login.cgi">
                <div class="error-msg" id="error-msg">
                 <p>Invalid email address or password</p>
                 </div>
                <input type="email" name="email_address" required>
                <input type="password" name="password" required>
                <input type="submit" id="submit" value="Submit">
            </form>
        <script>        
            var xmlhttp = new XMLHttpRequest();

            xmlhttp.onreadystatechange = function() {
              if (this.readyState == 4 && this.status == 200) {
            var myObj = JSON.parse(this.responseText);
            document.getElementById("error-msg").style.display = myObj
+.show;
              }
            };
            
            xmlhttp.open("GET", "cgi-bin/login.cgi", true);
            xmlhttp.send();
            
        </script>
    </body>
</html>

[download]

login.cgi

#!/usr/bin/perl

use warnings;
use CGI;
use DBI;
use DBD::mysql;
use CGI::Session '-ip_match';
use JSON;

my $cgi = CGI->new;

my $email = $cgi->param('email_address');
my $password = $cgi->param('password');

my $myConnection = DBI->connect("DBI:mysql:xxxxx:localhost","xxxxx","x
+xxxx");
my $sql = "SELECT COUNT(*) FROM UserDatabase WHERE EmailAddress = ? AN
+D Password = SHA2(?, 256)";

my $sth = $myConnection->prepare($sql);

$sth->execute;

$sth->finish;

if($myConnection->selectcol_arrayref($sql, undef, $email, $password)->
+[0] == 1)
{

    my $session = CGI::Session->new() or die CGI::Session->errstr;
        
    $session->param('email_address', $email);
        
    $session->expire('+1M');

    print $session->header("Location: https://xxxxx.xxx/dashboard");
    
}
else
{    
    my %rec_hash = ('show' => "block");
    my $json = encode_json \%rec_hash;
    print $cgi->header("https://xxxxx.xxx/login");
    print "$json";
    exit; 
}

[download]

Any suggestions on how to do that?

In reply to Suggestions on how to show an "invalid email address" box in the login page by underTheRadar

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.