仅针对 1 个元素的客户端表单有效性检查

Question

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

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

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

不幸的是，这会提交整个表单以进行有效性检查。

我也试过这个，但是它只是返回一个真/假布尔值，而不是进行客户端验证：

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

Answer 1

几点建议：

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>