如何实现仅在表单填写完整后才可点击的input type submit按钮

Hey there, let's fix your form issue step by step. The main problems right now are that you're using an <a> tag to wrap your submit button (which bypasses any form validation) and you don't have proper form structure or validation rules in place. Here's how to fix it:

Key Issues to Address #

• You wrapped the submit button in an <a> tag: this makes clicking the button immediately trigger a page jump, ignoring any form checks.
• No <form> element to group your inputs and handle submission logic properly.
• No required validation rules on your fields, so empty values are allowed.

Modified Code with Validation #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
</head>
<body>
    <!-- Wrap all inputs in a form with action set to your target page -->
    <form action="file:///C:/Users/Guest/Desktop/Html/Website/Home.html" method="get">
        <input placeholder="First Name" type="text" required>
        <br>
        <input placeholder="Last Name" type="text" required>
        <br>
        <input placeholder="Email Address" type="email" required> <!-- Use email type for built-in validation -->
        <br>
        <input placeholder="Password" type="password" id="password" required>
        <br>
        <input placeholder="Confirm Password" type="password" id="confirmPassword" required>
        <br>
        <!-- Add required to one radio button (applies to the group since they share the same name) -->
        <input style="cursor: pointer;" name="Gender" type="radio" value="male" required>Male
        <input style="cursor: pointer;" name="Gender" type="radio" value="female" required>Female
        <br>
        Birthday 
        <select style="cursor: pointer;" required>
            <!-- Disable default option so it can't be selected -->
            <option value="" disabled selected>Select Date</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
            <option>13</option>
            <option>14</option>
            <option>15</option>
            <option>16</option>
            <option>17</option>
            <option>18</option>
            <option>19</option>
            <option>20</option>
            <option>21</option>
            <option>22</option>
            <option>23</option>
            <option>24</option>
            <option>25</option>
            <option>26</option>
            <option>27</option>
            <option>28</option>
            <option>29</option>
            <option>30</option>
            <option>31</option>
        </select>
        <br>
        <!-- Remove the a tag, let the form handle submission -->
        <input type="submit" style="cursor: pointer;">
    </form>

    <!-- Add custom validation for password match -->
    <script>
        const form = document.querySelector('form');
        const password = document.getElementById('password');
        const confirmPassword = document.getElementById('confirmPassword');

        form.addEventListener('submit', function(e) {
            if (password.value !== confirmPassword.value) {
                e.preventDefault(); // Stop form submission
                alert('Passwords do not match!');
                confirmPassword.focus(); // Highlight the confirm password field
            }
        });
    </script>
</body>
</html>

What Changed & Why #

1. Wrapped inputs in <form>: The action attribute defines where the form submits to, replacing the <a> tag's behavior. Now the submit button triggers form submission instead of a direct jump.
2. Added required attribute: This tells the browser that the field can't be empty. The browser will show a default error message and block submission until the field is filled.
3. Fixed email input: Changed to type="email" for built-in email format validation.
4. Disabled default birthday option: The first option is now disabled and selected, so users have to pick a valid date (since an empty value would fail the required check).
5. Password match validation: Added a small script to check if password and confirm password match, preventing submission if they don't.

This setup uses native HTML5 validation first (which is lightweight and works without JS) plus a bit of custom JS for the password match check. Users won't be able to submit the form until all required fields are filled correctly!

内容的提问来源于stack exchange，提问作者Farhan Sadik Snigdho