客户端表单有效性检查仅适用于1个元素 已更新：

如何解决客户端表单有效性检查仅适用于1个元素 已更新：

我正在寻找一种方法，可以在表单元素的值更改后立即对其进行验证。

到目前为止，我有以下内容：

$('#loanApplicationForm input,select').change(function() {
    var $myForm = $('#loanApplicationForm'); 
    $('<input type="submit">').hide().appendTo($myForm).click().remove();    
    $myForm.find(':submit').click(); 
}

很遗憾，这会提交整个表格以进行有效性检查。

我也尝试过这样做，但是它只是返回一个true / false布尔值，而不是执行客户端验证：

$(this)[0].checkValidity();

解决方法

一些指针：

1. 将表单元素缓存到函数之外（以便元素缓存完成一次并存储以供重用-否则每次重新运行该函数（每次击键时都会重新缓存））

2. 使用.keyup()事件捕获每个击键以进行验证测试

3. 使用$form.submit()提交表单-无需插入提交按钮并单击它。

$form = $('#myForm');
$('#theInput').keyup(function(){
  if ( this.value == 'yay' ){
    $form.submit();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myForm" action="endpoint.php" method="submit">
  <input id="theInput" type="text" placeholder="type: yay" />
</form>

已更新：

根据OP请求，正确的验证将显示一个提交按钮，而不是自动提交表单。

$form = $('#myForm');
$('#theInput').keyup(function(){
  if ( this.value == 'yay' ){
    $('#btnSubmit').show();
  }
});

#btnSubmit{display:none};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myForm" action="endpoint.php" method="submit">
  <input id="theInput" type="text" placeholder="type: yay" />
  <button id="btnSubmit" type="submit">Submit</button>
</form>

这里是您可能更喜欢的另一个版本-提交按钮始终可见，但是在验证成功之前被禁用。另外，如果您需要验证实际项目中的多个字段，我还添加了第二个字段用于验证测试。

$form = $('#myForm');
$('#myForm input').keyup(function(){
  if ( $('#theInput1').val() == 'yay' && $('#theInput2').val() == 'bob' ){
    $('#btnSubmit').attr('disabled',false).addClass('fgGreen');
  }
});

.fgGreen{color:green;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myForm" action="endpoint.php" method="submit">
  <input id="theInput1" type="text" placeholder="type: yay" />
  <input id="theInput2" type="text" placeholder="type: bob" />
  <button id="btnSubmit" type="submit" disabled>Submit</button>
</form>