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

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

下面是我在表单有效的情况下运行函数的步骤，它可以完美地工作

$('#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.')
});

如果表单无效，我需要运行函数。如果表单有效，则会同时注册click和submit，因此这两个函数会发生冲突。这是我当前失败的解决方法，因为如果表单有效，按钮将显示复制失败、复制成功、复制，而不是复制成功

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

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

---

注意：由于我使用的第一个有效代码，按钮必须为：submit类型，除非有其他选项来实现我试图实现的目标，因为我无论如何都不希望提交事件，这就是我执行event.preventDefault（）的原因。如果是这样，我会使用链接作为按钮。如果需要，可以使用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>

用户名必须至少为6个字符

然后，我们可以简单地使用这样的按钮来触发验证：

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

$（'submit btn'）。在（'click'，function（）上{
if（$（'#username'）.val（）.length<6）{
提醒（“嘿，那个用户名不够像兄弟”）；
}
否则{
$（'form'）.submit（）；
}
});

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

我创建了一个

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');
    }

});

$（“#表单”）.submit（函数（事件）{
if（$（'#username'）.val（）.length<6）{
//如果验证失败，您可以编写代码
event.preventDefault（）；
$（“#结果”）.html（'复制失败'）；
}否则{
//如果验证成功且表单有效，则需要编写代码
//它将自动提交表单，因此无需注册
//分别提交并单击事件。
$（“#结果”）.html（‘复制成功’）；
}
});

如果无效，请单击按钮如果表单无效，请通过更改按钮样式和文本提供反馈。如果有效，请单击按钮，.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);
  })
})

---

您是否尝试过使用链接作为按钮？单击时，只需触发验证，然后提交有效的表单。是否尝试添加

event.preventDefault（）是否也指向单击事件？也有点困惑，因为没有明显的检查-如果你点击按钮，它会失败，但是如果你提交它就可以了？但是按钮必须是提交按钮吗？当然，最简单的答案是，不要有一个type=submit按钮，如果它通过了，就调用form.submit（）。很抱歉我误解了。是的，我需要做一些检查来确定表单是否有效，但我不确定如何进行。我只知道如何通过提交检查表格是否有效。所以我想的是运行我的'notvalid functions'onclick。这是因为如果我单击按钮，表单无效，那么单击中的任何函数都会运行。问题在于，如果我的表单有效，请单击并提交注册表。我假设如果event.preventdefault（）指向onclick，那么如果我的表单有效，submit将不会运行，并且我的表单将继续失败。不是吗？这与使用
按钮类型=按钮
有什么区别，而不是使用
在语义上是不正确的（因此应该是
）。我需要设置按钮的样式，而不是输入。很抱歉，如果我没有正确地拼写它，我将尝试检查表单本身是否无效，而不是检查输入是否无效。@LordSacha“我尝试检查表单本身是否无效”是什么意思？表单本身无效表示该表单中有一个或多个输入无效。在chrome中表示有黄色感叹号。因此，如果存在一个或多个输入无效的run function（）{$（'#btn'）.html（'Retry'）@LordSacha好的，你在表单中寻找什么样的验证？通常，验证警告（如chrome中的黄色感叹号）基于您为该输入设置的有效条件。什么会触发代码中的无效？是否有其他方法来确定表单本身是否有效，而不是检查每个输入的有效性？是的，你可以。这就是为什么我问你是否使用了一些验证插件。看看这个。您可以在
if
案例中使用这个
$（“#form_id”）.valid（）。如果这不容易实现，那么我将研究如何使用该插件。