无form标签时input required属性失效，求JavaScript验证方案

Hey there! Let's get this validation working for you. You're right that the native required attribute only triggers when the input is inside a <form>—but we can build that logic ourselves with jQuery (since you're already using it) without needing a form.

First, let's fix a couple of small issues in your existing code:

• You have two inputs with the same id="target"—IDs must be unique! I'll rename the second one to target2 in the example below to avoid DOM selection bugs.
• Your myFunct() was bound to the target inputs' click event, not the submit button's click, which is where we need to run the validation check.

Here's the updated code that does exactly what you want:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
  <td>
    <input type="text" size="30" placeholder="put id" id="source" required>
    <button type="button" class="formButton" id="submit">Submit</button>
  </td>
</tr>
<tr>
  <td>
    <input type="text" style="border:none" size="40" id="target" class="form" onClick="myFunct()">
  </td>
</tr>
<tr>
  <td>
    <input type="text" style="border:none" size="40" id="target2" class="form21" onClick="myFunct()">
  </td>
</tr>

<script>
$(".formButton").click(function() {
  $(".form21").show();
});

$('#submit').click(function(){
  // Trim whitespace to avoid treating empty spaces as valid input
  const sourceValue = $.trim($('#source').val());
  
  // Check if the input is empty
  if (!sourceValue) {
    alert('字段不能为空');
    return; // Stop execution here if validation fails
  }
  
  // If validation passes, run your submission logic
  $('#target').val('text' + ' text');
  // Uncomment below to update the second target input too
  // $('#target2').val('text' + ' text');
});

function myFunct() {
  // Keep your existing function here if you need it for target inputs
}
</script>

Key Changes Explained: #

• Unique IDs: Renamed the second target input to target2 to ensure jQuery selects the correct elements.
• Validation Check: Added a check for the trimmed source value—this ensures that just typing spaces doesn't bypass the validation.
• Early Exit: If the input is empty, we show the alert and return immediately, so the submission logic below doesn't run.
• Button Type: Changed the button from type="submit" to type="button" to avoid any accidental native form submission behavior (even without a form, this is a safe practice).

If you prefer to leverage the native HTML5 validation logic (using the required attribute directly), you can use this alternative validation snippet instead:

$('#submit').click(function(){
  const sourceInput = $('#source')[0]; // Get the native DOM element
  
  if (!sourceInput.checkValidity()) {
    alert('字段不能为空');
    sourceInput.reportValidity(); // Show the native browser validation tooltip too
    return;
  }
  
  // Submission logic here
  $('#target').val('text' + ' text');
});

This uses the native checkValidity() method, which respects the required attribute—matching the behavior you'd get with a form, but triggered manually.

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