Here are the steps to resolved this issue.

Front-End

1. Add ID to Elementor Login Widget
   
2. Add incorrect message/notification using text widget or head. In this case, the message has been placed below the login button
   
3. Set dynamic visibility for the error message. In this case query variable (fout) has been used for the condition which will be explained as well later on the steps. This query variable will be generated in the URL once there is an error regarding credentials.
   
4. Add a script using HTML widget for login form validation. This will disable the button if username and password is empty. Login button will be only clickable once the two input fields are not empty. This is to avoid the issue #2 ocurring.

   <script>
   jQuery(function($){
   function checkIfEmpty(){
   if($(‘input#user’).val().trim() !== ” && $(‘input#password’).val().trim() !== ” ){
   $(‘div#login-form-container button’).removeClass(‘disbtn’);
   $(‘div#login-form-container button’).removeAttr(‘disabled’)
   }
   else{
   $(‘div#login-form-container button’).addClass(‘disbtn’);
   $(‘div#login-form-container button’).attr(‘disabled’, true)
   }
   }
   $(document).on(‘keyup’, ‘input#user, input#password’, checkIfEmpty);
   $(document).on(‘change’, ‘input#user, input#password’, checkIfEmpty);
   checkIfEmpty();
   })
   </script>

   Note : It is important that you’ve done the step number #1 in order for this validation to work. You can use different ID as well if you would like to
   

5. Saved your work.

Back-end

There are two ways to add the code :

1. Go to Appearance > Theme File Editor > functions.php
2. Code Snippet

Paste this code below :

add_action( ‘wp_login_failed’, ‘elementor_form_login_fail’, 9999999 );
function elementor_form_login_fail( $username ) {
$referrer = $_SERVER[‘HTTP_REFERER’]; // where did the post submission come from?
if (isset($_SERVER[‘REQUEST_URI’]) && $_SERVER[‘REQUEST_URI’] !== ‘achterdeur’){
wp_redirect(preg_replace(‘/\?.*/’, ”, $referrer) . ‘?fout=verkeerd-wachtwoord’ );
exit;
}
}
add_filter(‘elementor_pro/login/redirect’, ‘custom_elementor_login_redirect’, 10, 3);

You can use another query var name aside from fout and the value of it, it doesn’t matter as long as the request parameter in dynamic visibility is equal to that variable name that you’ve written. This is the query variable that you’ll see in the URL once the credentials are incorrect. We used this as well for the dynamic visibility of the error message.