您可以使用CSS禁用按钮上的指针事件。

form:invalid>#submit {
  pointer-events: none;
}

<form>
  <label for="name">* Name</label>
  <input type="text" id="name" required><br>
  <label for="name">* Address</label>
  <input type="text" id="address" required><br>
  <input type="submit" value="Submit" id="submit">
</form>

您也可以使用Javascript禁用该按钮。
一个二个一个一个

你可以在true之后再做

$("#button").prop("disabled", true);

你可以试试这样的方法：

$(function() {
$("#input-text").keyup(function () {
 if($("#input-text")[0].checkValidity()){
      $('#submit-button').attr('disabled', 'disabled');
 }else{
        $('#submit-button').removeAttr('disabled');
 }
 });
})($);

<form id="newRecord">
<input type="text" required id="input-text"/>
<button form="newRecord" type="submit" id="submit-
button">Submit</button>
</form>

一个更通用的解决方案，用于多个窗体并支持多个输入和按钮。
它直接检测表单上的更改事件，然后更改所有提交类型的disabled属性

function disableFormSubmit(form) {
    const buttons = form.querySelectorAll(
        'button[type="submit"], input[type="submit"]'
    );
    const disableButtons = () =>
        buttons.forEach(el => (el.disabled = form.matches(":invalid")));

    form.addEventListener("change", disableButtons);
    disableButtons();
}

document.querySelectorAll("form").forEach(disableFormSubmit);

<form action="/">
    <legend>First form</legend>
    <input type="text" required> <br>
    <input type="Checkbox" required> required checkbox <br>
    <input type="submit">
    <button type="submit">Button submit</button>
</form>
<hr>
<form action="/">
    <legend>Second form</legend>
    <select required>
        <option value="" disabled selected>Select one</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select> <br>
    <input type="radio" required name="radio"> required radio <br>
    <input type="submit">
    <button type="submit">Button submit</button>
</form>

我个人倾向于只使用CSS作为视觉提示的解决方案，除非您需要disabled属性