How to toggle the HTML5 input "required" function depending on which button is pressed

Question

I have in my form a textarea input field and I am using the HTML5 required attribute:

<textarea class="form-control text-secondary mb-3" rows="4" name="audit_req_comment_decision" type="text" value="<?php echo htmlentities($audits['audit_req_comment_decision']); ?>" required></textarea>

<button type="submit" class="btn btn-danger" name="accepted">Accepted</button>
<button type="submit" class="btn btn-danger ml-auto" name="rejected">Rejected</button>

My form also has two buttons. One will send "accepted" and the other one is to send "rejected". I would like to change my form so that when the user clicks on the "Accepted" button it will check the required input is not empty. But if the "Rejected" button is clicked, the text area should not be required and the form will submit even if it is empty.

Is there any workaround available?

Answer 1

Method 1: Handle the requirement validation yourself

You need to remove the "required" attribute from the element - the browser implements that requirement but you want to handle it yourself.

When that is removed, you need you use javascript to handle the submission. You can add code to your "Accepted" button that checks if the text area has a value, and if not then prevent the form from being submitted.

To do this:

1. Remove the required attribute from the textarea
2. Add a class to all required elements, e.g. <textarea class="required-on-accept">
3. Add a javascript function to check all the elements with your class, and check if they have a value. If they are empty, return false to prevent the form from being submitted
4. Call this function when your button is clicked by adding the onclick to the button as follows: <button type="submit" onclick="return check_required();">

See a working example:

function check_required() {
  /* check all elements with the class required-on-accept */
  var elements = document.getElementsByClassName("required-on-accept");
  for (var i = 0; i < elements.length; i++) {
      /*if any element is empty, return false to prevent the form being submitted */
      if (elements[i].value==""){
        console.log(" required value not entered!");
        return false;
      }
  }
  return true;
}

<form id="my-form">
  <textarea class="form-control text-secondary mb-3 required-on-accept" rows="4" name="audit_req_comment_decision" type="text" value="123"></textarea>

  <button type="submit" onclick="return check_required();" class="btn btn-danger" name="accepted">Accepted</button>
  <button type="submit" class="btn btn-danger ml-auto" name="rejected">Rejected</button>
</form>

Method 2: remove the required attribute on clicking the "Rejected" button

If you still want the browser to handle the validation except for when the "Rejected" buton is pressed, you still need javascript, but you can do it like this instead:

1. Add a class to all required elements, e.g. <textarea class="required-on-accept">
2. Add a javascript function to check all the elements with your class, and remove the required attribute
3. Call this function when your "Reject" button is clicked by adding the onclick to the button as follows: <button type="submit" onclick="return check_not_required();">

The required attribute will remain if the "Accepted" button is clicked, so the browser will still prevent the form from being submitted if that button is clicked.

See this working below -

function check_not_required() {
  /* check all elements with the class required-on-accept */
  var elements = document.getElementsByClassName("required-on-accept");
  for (var i = 0; i < elements.length; i++) {
    /* remove the "required" attribute from the element */
    elements[i].removeAttribute("required");
  }
  /* Tell the browser to submit the form - 
     the required elements are no longer required, 
     so the browser will not stop the submission if they're empty */
  return true;
}

<form id="my-form">
  <textarea class="form-control text-secondary mb-3 required-on-accept" rows="4" name="audit_req_comment_decision" type="text" value="123" required></textarea>

  <button type="submit" class="btn btn-danger" name="accepted">Accepted</button>
  <button type="submit" onclick="return check_not_required();" class="btn btn-danger ml-auto" name="rejected">Rejected</button>
</form>