form.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form validation</title>
</head>
<script type="text/javascript" src="form.js"></script>

<body>
    <form action="action.php" method="post">
        <div>
            <label for="FirstName">FName</label>
            <input type="text" name="Fname" placeholder="Enter your FirstName" id="Fname" maxlength="20">
            <input type="button" name="btn" value="Validate FirstName" onclick="MyFunc();">
        </div>

        <div>
            <label for="Lname">LName</label>
            <input type="text" name="Lname" placeholder="Enter your LastName" maxlength="20" id="Lname">

            <input type="button" name="btn" value="Validate Lastname" onclick="MyFunc1();">
        </div>
        <div>
            <label for="Email">Email</label>
            <input type="email" name="email" placeholder="Enter your Email" id="email">
            <input type="button" name="btn" value="Validate Email" onclick="Myfunc2();">
        </div>
        <div>
            <label for="PhoneNumber">Phone</label>
            <input type="fa-mobile-phone" name="phone" placeholder="Enter the Phone Number" id="phone">
            <input type="button" name="btn" value="Validate Phone Number" onclick="Myfunc1();">
        </div>
        <div>
            <label for="Password">Password</label>
            <input type="password" name="Password" placeholder="Enter the Password" id="Password">
            <input type="button" name="btn" value="Validate Password" onclick="MyFunc3();">
        </div>
    </form>
</body>

</html>