输入框为空时禁用提交按钮及readonly防篡改表单安全问题

Hey there! Let's tackle your two related issues step by step—front-end button disabling and preventing tampered readonly fields from being submitted. I want to start with a critical note upfront: front-end restrictions can always be bypassed with dev tools, so we need both front-end safeguards and back-end validation to cover all bases.

First, let's handle the button disabling logic. This is straightforward with JavaScript, and we'll make sure it works even if someone removes the readonly attribute:

• Add IDs to your input and submit button for easy targeting:

  <input type="text" id="protectedInput" readonly value="Value From Database">
  <button type="submit" id="submitBtn">Submit</button>
  

• Add JavaScript to check the input's value on page load and whenever it changes (including edits made via dev tools):

  const input = document.getElementById('protectedInput');
  const submitBtn = document.getElementById('submitBtn');
  
  // Function to toggle button state based on input value
  function setButtonState() {
    submitBtn.disabled = input.value.trim() === '';
  }
  
  // Set initial state when the page loads
  setButtonState();
  
  // Listen for any changes to the input (covers manual edits and dev tool tweaks)
  input.addEventListener('input', setButtonState);
  input.addEventListener('change', setButtonState);
  

  This will disable the submit button immediately if the input is emptied, even if someone removes the readonly attribute.

Here's the most important part: front-end fixes aren't enough. Anyone can modify or bypass them, so you must validate everything on the back-end. Here's how to secure this properly:

Front-End Safeguards (Optional but User-Friendly) #

If you don't need the input value to be submitted (just displayed), use disabled instead of readonly—disabled fields aren't included in form submissions. If you do need to send the original value, add a hidden input with the unalterable database value:

<!-- Visible input for display only -->
<input type="text" value="Original Database Value" disabled>
<!-- Hidden input to send the original value to the server -->
<input type="hidden" name="originalValue" value="Original Database Value">

This prevents tampered visible values from being submitted, but note that someone could still edit the hidden input—so back-end validation is non-negotiable.

Back-End Validation (Mandatory) #

When the form is submitted, fetch the original value directly from your database and compare it to the submitted value. If they don't match, or if the submitted value is empty, reject the submission.

Example (using PHP—adjust for your tech stack):

// Retrieve submitted value from the form
$submittedValue = $_POST['inputName'];

// Fetch the original value from your database (replace with your actual query)
$originalValue = $db->prepare("SELECT your_column FROM your_table WHERE id = ?");
$originalValue->execute([$recordId]);
$originalValue = $originalValue->fetchColumn();

// Validate the submission
if (empty($submittedValue) || $submittedValue !== $originalValue) {
  // Reject the request
  header("HTTP/1.1 400 Bad Request");
  echo "Invalid input: This field cannot be modified or submitted empty.";
  exit;
}

// Proceed with processing the form only if validation passes

Key Takeaway #

Front-end checks improve user experience, but never trust front-end input for security. Always validate all submitted data on the server side to ensure no tampered or empty values are processed.

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