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

Posted 2023-05-09

【中文标题】仅针对 1 个元素的客户端表单有效性检查

【英文标题】：Client side form validity check for 1 element only

【发布时间】：2021-01-24 16:55:20

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

您也可以添加表单 html 吗？

会有所作为吗？表格很长，有很多输入字段和东西，只会让我觉得问题变得混乱。如果提议的解决方案可行，它们将适用于任何形式。

如果有你的问题的演示会很有用。这就是我询问 HTML 的原因。

@evilgenious448 答案已更新。 如果您没有看到全部 3 个演示，请按 F5。

【参考方案1】：

几点建议：

在函数外缓存表单元素（以便元素缓存完成一次并存储以供重复使用 - 否则每次重新运行函数时都会重新完成缓存，即每次击键时）

使用.keyup() 事件来捕捉每次击键以进行验证测试

使用$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();
  
);

#btnSubmitdisplay: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');
  
);

.fgGreencolor: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>

【讨论】：

带有点击的提交按钮是因为我实际上并不想提交表单。我想你误解了我的问题。关键是要即时验证检查，让用户知道他们是否犯了错误，而不是实际提交表单。

好吧，让我改变一下……坚持下去必须跑腿……

我会坚持兄弟。

抱歉延迟 - 根据您的要求更新。我把以前的版本留在那里供你参考，以备日后有用。