javascript - Onclick 函数不适用于 CFINPUT 验证

Question

我尝试使用 CFINPUT 验证字段，然后调用弹出窗口函数在提交表单之前执行更多操作，但它不起作用。 onclick 函数似乎优先于 CFINPUT 验证。一旦我单击“提交”按钮，它就会首先调用弹出窗口函数，而不验证字段。我需要它来:

1. 首先验证字段
2. 调用弹出函数
3. 然后在弹出窗口自行关闭后提交表单

(p.s.我在这里看到其他类似的案例，但没有给出答案)

代码如下所示:

    <cfform action="register.cfm" method="post">
        <cfinput type="text" name="username" size="50" maxlength="100" required="yes" autofocus="on" validate="noblanks">
        <cfinput type="text" name="address" size="50" maxlength="100" required="yes" validate="noblanks">
....
         <input type="submit" value=" Send " onclick="popup()">
....

请帮忙。谢谢。

Answer 1

这是一篇旧的博客文章，所以不确定今天的内容有多准确，但它展示了如何通过 _CF_checkTaskForm() 函数运行 CFFORM 验证。所以看起来如果您通过 <input type="button" value="Send" onclick="popup(this.form)" /> 将表单的提交更改为按钮然后更改弹出函数以首先通过 _CF_checkTaskForm() 验证表单，如果通过则继续执行您正在执行的其他 JS。

http://www.neiland.net/blog/article/triggering-cfform-validation-when-using-ajax/

为了扩展这一点，我刚刚查看了 CF8 和 CF11 安装，看起来这些函数中的函数是 _CF_checkCFForm_1 如果使用该版本的 CF，那么类似这样的内容应该可以让您找到正确的方向:

<script>
    popup = function(formreference) {
        var check = _CF_checkCFForm_1(formreference);

      if (!check) {
            //if the rules failed then do not submit the form
           return false;
      } else { 
            // Do the popup
      }
    }
</script>

<cfform action="register.cfm" method="post">
        <cfinput type="text" name="username" size="50" maxlength="100" required="yes" autofocus="on" validate="noblanks">
        <cfinput type="text" name="address" size="50" maxlength="100" required="yes" validate="noblanks">
         <input type="button" value=" Send " onclick="popup(this.form)" />
</cfform>