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

如果表单无效,我需要运行功能。如果表单有效,则单击和提交都将被注册,因此这两个功能会发生冲突。这是我当前失败的解决方法,因为如果表单有效按钮显示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,除非有其他选项来实现我要实现的目标,因为无论如何我都不希望提交事件,这就是我要做event.preventDefault()的原因

评论