First, for security reasons you don't want to admit the username is correct - the messaging should be more generic like "Please enter a valid username and password"
The other consideration is how the credentials are verified. This could be done with a simple webservice that returns a JSON result. So a request to: /verifycreds.php?username=John&password=password
could return the following:
{ success: false, message: "Please enter a valid username and password" }
From there the form would be updated with an onSubmit handler to verify the credentials before submitting the page. For this example I'll use jQuery - please reference the documentation
$( "#myform" ).submit(function( event ) {
var verificationURL = "/verifycreds.php?username="
+ $('#username').val()
+ "&password=" + $('#password').val();
$.get(verificationURL, function(data) {
if(!data.success) {
event.preventDefault();
// Display popup of your choice here with data.message
}
});
});
That is the basic setup. We are adding an onSubmit handler to #myForm
, we build the URL to the verify credentials webservice, we then handle the result and stop the form submission if verification fails and show the message.