I think that this might help:
Here is a CSS-only Solution

.search input{
outline: 0;
background: #eee;
border: 0;
padding: 15px;
border-radius: 5px;
width: 50%;
transition: all .2s;
margin: 2px;
border: 2px solid transparent;
}
.search input:focus {
background: #fff;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);}
.search input:invalid {
border: 2px solid #f4594e;
}

<h2>Type the letter e in the input box </h2>
<h3>Then, try typing any number in it </h3>
<div class="search">
<input type="number" placeholder="Type...">
<h3>Please type an email</h3>
<input type="email" placeholder="Type...">
<h3>REQUIRED input (Type your email to remove border)</h3>
<input type="email" placeholder="Type..." required>

</div>

Now, I am guessing you are using PHP for backend, so let me give you another example. This will return result after you submit the form, just like how you wanted it.

Try submitting this form with an invalid input

<?php 
$nameError = ""; 
$emailError = ""; 
$passwordError = ""; 
$mobileError = ""; 
$success = ""; 
   
function validate_input($input) { 
    $input = trim($input); 
    $input = stripslashes($input); 
    $input = htmlspecialchars($input); 
    return $input; 
} 
   
if(isset($_POST['form_submit'])) { 
    $name = $_POST['name']; 
    $password = $_POST['password']; 
    $email = $_POST['user_email']; 
    $mobile = $_POST['mobile']; 
     
    if (empty($_POST["name"])) { 
        $nameError = "Name is required"; 
    } else { 
        $name = validate_input($_POST["name"]); 
          
        if($name == 'chetan') { 
            $success= "Thank you ". $name.", "; 
            echo $success; 
        } 
    } 
     
    if (empty($_POST["email"])) { 
        $emailError = "Email is required"; 
    } else { 
        $email = validate_input($_POST["email"]); 
          
        if($email == '[email protected]') { 
            $success= $email." is correct"; 
            echo $success; 
        } 
    } 
       
    if (empty($_POST["password"])) { 
        $passwordError = "Password is required"; 
    } else { 
        $password = validate_input($_POST["password"]); 
      
        if($password == '[email protected]') { 
            $success= $password." is correct"; 
            echo $success; 
        } 
    } 
   
    if (empty($_POST["mobile"])) { 
        $mobileError = "Mobile is required"; 
    } else { 
        $mobile = validate_input($_POST["mobile"]); 
          
        if($mobile == '123456789') { 
            $success= $mobile." is correct"; 
            echo $success; 
        } 
    } 
    if(empty($success)) 
        echo "Invalid input!!!"; 
} 
?> 

So I’ve found plenty of answers that explain how to do this with Javascript (Like this one), but I don’t understand why js is necessary; the default behaviour is already there, can’t I simply change whatever the browser does by default?

For example, in a very simple form with required inputs, submitting the form with empty inputs will change their borders to red. Isn’t there any way to style THAT? The input:invalid css selector will show up as soon as the page is loaded and not after submission, hence the need for js, but isn’t possible to simply alter what the browser does by default? If not, why?

It’s not that big a deal, but not having to add listeners to every single form in my websites every time would be great.