HTML表单required属性仅对Name和Email生效，Company和Phone失效求助

Hey, I see the exact issue here! The problem stems from how you're triggering form submission—using a <div> with an onclick handler skips the browser's native form validation flow, which is why the required attribute isn't working for your Company and Phone fields (and actually, it shouldn't be working consistently for Name/Email either, that was likely a coincidence).

Why This Happens #

HTML5's built-in form validation (including the required check) only activates when the form is submitted via the native browser submission mechanism:

• Clicking a <button type="submit"> or <input type="submit">
• Pressing Enter while focused on a form input

A <div> with an onclick event bypasses this entirely, so the browser never runs those validation checks.

Solution 1: Use a Native Submit Button (Recommended) #

This is the simplest, most accessible approach. Replace your <div> with a native submit button, and bind your custom logic to the form's onsubmit event instead:

<form onsubmit="return catalog_popup_submit();">
  <input type="text" name="name" value="" placeholder="Name" required />
  <input type="text" name="company" value="" placeholder="Company" required />
  <input type="text" name="email" value="" placeholder="Email" required />
  <input type="text" name="phone" value="" placeholder="Phone" required />
  <br />
  <button type="submit" class="button">Continue</button>
</form>

Update your function to return true to allow submission, or false to cancel it:

function catalog_popup_submit() {
  // Add your custom logic here (e.g., data processing, AJAX calls)
  // Return true to let the form submit, false to block it
  return true;
}

Solution 2: Manually Trigger Validation (If You Need to Keep the <div>) #

If you must retain the <div> for styling or other reasons, you can manually trigger validation in your catalog_popup_submit function:

function catalog_popup_submit() {
  const form = document.querySelector('form');
  
  // Check if all fields meet validation rules
  if (form.checkValidity()) {
    // Proceed with your submission logic (e.g., AJAX, native form submit)
    form.submit(); // Uncomment this line if you want to submit the form natively
  } else {
    // Trigger the browser's native error messages for invalid fields
    form.reportValidity();
  }
}

This will make the browser display the same default error prompts as native submission, ensuring all required fields are checked before proceeding.

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