如果 html 表单无效，如何运行函数？

Question

我正在制作一个表格。如果表单无效，我需要通过更改按钮样式和文本提供反馈，以便用户知道他们尝试执行的操作未执行。

如果表单是有效，这就是我要运行的函数，它工作得很好。

$('#form').submit(function(event){
    // cancels the form submission
    event.preventDefault();

    // do stuff if form valid
    $("#btn-copy").html('COPY SUCCESS')
    console.log('Text is copied.')
});

如果表单无效，我需要运行函数。如果表单有效，则单击和提交都已注册，因此这两个函数会发生冲突。这是我目前失败的解决方法，因为如果表单有效按钮会说 COPY FAIL、COPY SUCCESS、COPY，而不是 COPY SUCCESS

$("#btn-copy").click(function(){
    $(this).html('COPY FAIL');
    setTimeout(function(){
        $('#btn-copy').html('COPY');
    },1000);
   console.log('COPY FAIL.')
})

我如何运行函数只有当提交按钮被点击，但表单无效（因此，提交没有被触发）。反之，如果表单有效，则只运行我的有效函数。

注意：按钮必须是 type:submit 因为我使用的第一个有效代码，除非有其他选项可以实现我想要实现的目标，因为我不想提交事件，这就是我做事件的原因。防止默认（）

Answer 1

如果无效，点击按钮如果表单无效，通过更改按钮样式和文本提供反馈。如果有效，并且点击按钮，.submit 函数运行。

$("#btn-copy").click(function(e){
   if(document.getElementById('form-pesan').checkValidity()){
    console.log('form valid and button clicked');
      $(this).html('RUN');        
   }
   else {
    console.log('form invalid and button clicked');
       $(this)
         .html('Please Recheck Form')
         .attr("disabled", true);
       setTimeout( function(){
        $("#btn-copy") 
         .html('RUN')
         .attr("disabled", false);
       },1500);
   }
});

  // Submit is always triggered only if validity is true
  $('#form').submit(function(event){
    // cancels the form submission (personal need).
    event.preventDefault();

    // MY COMMANDS
    $("#btn-copy").html('RUN SUCCESSFULLY');
    console.log('Form is valid and button is pressed');
    setTimeout(function(){
      $('#btn-copy').html('RUN');
     },1000);
  })
})

Answer 2

如果是这种情况，我会使用链接作为按钮。如果需要，您可以使用 CSS 设置样式。然后，如果单击它，您可以执行验证。我做了一个简单的例子，如果用户没有输入至少 6 个字符长的用户名，则表单无效，否则有效：

<form method="post" action="/some-random-action.html">
  <input type='text' class='form-control' placeholder='username' id="username">
  <small class='form-text text-muted'>Username must be at least 6 characters</small>
  <br>
  <a href="#" class="btn btn-primary" id="submit-btn">
    Submit
  </a>
</form>

那么我们就可以简单的使用那个点击触发验证：

$('#submit-btn').on('click', function() {
    if($('#username').val().length < 6) {
        alert("Hey, that username isn't like enough bro");
    }
    else {
        $('form').submit();
    }
});

Answer 3

我假设您正在使用一些验证插件或手动检查表单验证。

我创建了一个jsfiddle

HTML 标记：

<form action="/" id="form">
  <input type="text" id="username" />
  <button type="submit">Submit</button>
</form>

<h2 id="result"></h2>

JS代码：

$('#form').submit(function(event){
    if ($('#username').val().length < 6) {

      // you code if validation failed

        event.preventDefault();
      $("#result").html('COPY FAILED');
    } else {

      // you code if validation succeed and form is valid
      // it will auto submit form, so no need to register 
      // submit and click event separatly.
      $("#result").html('COPY SUCCESS');
    }

});