如何结合submit/button双按钮校验单选按钮的选中状态？

Got it, let's work through this solution for your form validation need. First, let's start with a complete version of your form code (I filled in the missing bits to make it functional):

<form id='myform' method="POST">
  <label style="font-family: sansationregular;">Choose a time frame:</label><br/>
  <input type="radio" name="time" value="t1">
  <label style="margin-left: 10px;font-family: sansationregular; vertical-align: middle;"> Today</label>
  
  <input type="radio" name="time" value="t2">
  <label style="margin-left: 10px;font-family: sansationregular; vertical-align: middle;"> Yesterday</label>
  
  <input type="radio" name="time" value="t3">
  <label style="margin-left: 10px;font-family: sansationregular; vertical-align: middle;"> Last 7 Days</label>
  
  <input type="radio" name="time" value="t4">
  <label style="margin-left: 10px;font-family: sansationregular; vertical-align: middle;"> Last 30 Days</label><br/><br/>
  
  <button type="submit">Submit Form</button>
  <button type="button" id="customActionBtn">Custom Action</button>
</form>

The core idea here is to reuse validation logic for both buttons—no need to write duplicate code. Here's how to implement it with vanilla JavaScript:

Step 1: Create a Reusable Validation Function #

First, make a function that checks if any radio button with name="time" is selected. This way we can call it from both button handlers.

function isTimeFrameSelected() {
  // Grab all radio buttons in the group
  const timeRadios = document.querySelectorAll('input[name="time"]');
  // Check if at least one is checked
  return Array.from(timeRadios).some(radio => radio.checked);
}

Step 2: Handle the Submit Button #

For the submit button, we need to intercept the form's default submission behavior. If validation fails, we stop the form from submitting and alert the user.

const form = document.getElementById('myform');

form.addEventListener('submit', (e) => {
  if (!isTimeFrameSelected()) {
    // Prevent form from submitting
    e.preventDefault();
    // Show user feedback (you can replace this with a nicer in-page message too)
    alert('Please select a time frame first!');
  }
  // If validation passes, the form will submit as normal
});

Step 3: Handle the Regular Button #

For the button with type="button", we'll add a click event listener that runs the same validation. If it passes, you can execute whatever custom logic you need (like AJAX calls, page updates, or manually submitting the form).

const customBtn = document.getElementById('customActionBtn');

customBtn.addEventListener('click', () => {
  if (isTimeFrameSelected()) {
    // Validation passed—run your custom code here
    console.log('Time frame selected! Executing custom action...');
    // Example: Manually submit the form if needed
    // form.submit();
    // Or make an AJAX request:
    // fetch('/your-endpoint', { method: 'POST', body: new FormData(form) });
  } else {
    // Same feedback as before
    alert('Please select a time frame first!');
  }
});

Optional: Better User Feedback (No Alert Boxes) #

If you want a smoother experience than browser alerts, add an error message element to your form:

<form id='myform' method="POST">
  <!-- Existing form content -->
  <p id="validationError" style="color: red; display: none; margin-top: 10px;">Please select a time frame!</p>
  <!-- Buttons -->
</form>

Then update the validation logic to show/hide this element instead of using alert:

const errorMsg = document.getElementById('validationError');

function isTimeFrameSelected() {
  const timeRadios = document.querySelectorAll('input[name="time"]');
  const selected = Array.from(timeRadios).some(radio => radio.checked);
  
  if (!selected) {
    errorMsg.style.display = 'block';
  } else {
    errorMsg.style.display = 'none';
  }
  
  return selected;
}

This keeps the feedback inline with the form, which is more user-friendly.

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