I have created registration form using html 5, In which required field validation not running when scroll down and submit form

Here I am sharing a sample code of my registration form, the form is quite long. I wonder when I scroll down the form to submit, the required field validation not working. If I zoom out the browser and the form came in one shot then validation works fine. Also, it has strange behavior, sometimes in the chrome browser it working, and checking into another`s pc with the same browser version is not working. Can anyone help me to solve this problem, Where I am going wrong?Thank you in advance

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
</head>
<body>
    <form action="register_confirmation.php" name="registration" id="registration" method="POST">
         <!---------------First Name-------------- -->
         <label class="fname_lbl"><b>Name</b> </label>
         <input type="text" name="fname" id="fname" placeholder="fname" required="" 
         oninvalid="this.setCustomValidity('Please enter name')" onchange="this.setCustomValidity('')" />
         <button type="submit" class="common_btn" id="cmn_btn">submit</button>
   </form>
</body>
</html>