JS动态创建input的HTML5 required属性失效问题求助

Hey there, let's break down why your HTML5 required validation isn't kicking in, and fix it step by step!

The Core Problem #

HTML5's native form validation (including the required attribute) only triggers automatically when the default form submission flow is triggered. Right now, your save button is a type='button' that calls a custom AJAX function directly—this skips the browser's built-in validation checks entirely, which is why the form submits without showing any required field prompts.

Additionally, your save button has a required attribute attached to it, which is unnecessary (buttons don't need to be marked as required) and could cause unexpected behavior—go ahead and remove that first.

Fix Option 1: Use a Submit Button & Hook Into the Form's Submit Event #

This is the most "native" approach, since it leverages the browser's built-in validation flow:

1. Update your save button's type from button to submit, and remove the inline onclick handler:

<button type='submit' id='saveBtn' class='btn btn-info fa fa-download fa-2x saveBtn' name="submit"></button>

2. Bind a submit event listener to your form to prevent default submission and run your AJAX logic only after validation passes:

$('#my_form').on('submit', function(e) {
    // Stop the browser from reloading the page
    e.preventDefault();

    // If validation passes, run your AJAX code
    saveExerciseAjaxCall();
});

Now when you click the save button, the browser will first check all required fields (including your dynamically created input). If any are empty, it'll show the native validation prompt and stop the submit event from firing. Only when all fields are valid will your saveExerciseAjaxCall() run.

Fix Option 2: Manually Trigger Validation in Your AJAX Function #

If you prefer keeping the button as type='button', you can manually trigger validation checks at the start of your AJAX function:

Modify your saveExerciseAjaxCall() to include these checks:

function saveExerciseAjaxCall() {
    const form = document.getElementById('my_form');
    
    // Check if all fields pass validation
    if (!form.checkValidity()) {
        // Trigger the native validation prompt for invalid fields
        form.reportValidity();
        // Exit the function so AJAX doesn't run
        return;
    }

    // Proceed with your existing AJAX logic here
}

• form.checkValidity() runs all validation checks and returns true if everything is valid, false otherwise.
• form.reportValidity() tells the browser to display the native error prompts for any invalid fields (this is important, since checkValidity() alone just returns a boolean without showing feedback).

Quick Check to Confirm #

You can verify your dynamically created input has the required attribute correctly applied by opening your browser's DevTools (F12), inspecting the input element, and checking that the required attribute is present (it should show up as just required, not required="true"—jQuery handles this correctly for boolean attributes).

内容的提问来源于stack exchange，提问作者user9689724