Onclick 函数不适用于 CFINPUT 验证

Question

我正在尝试使用 CFINPUT 验证字段，然后在提交表单之前调用弹出 window 函数来做更多的事情，但它不起作用。 onclick 函数似乎优先于 CFINPUT 验证。只要我单击“提交”按钮，它就会首先调用弹出 window 函数而不验证字段。我需要它：

首先验证字段
调用弹窗功能
然后在弹出窗口自行关闭后提交表单

(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

您尝试执行的 cfinput 验证是客户端等效于

<cfif len(trim(string)) gt 0>

（编辑：这并不意味着您应该完全依赖客户端验证。客户端验证更多的是帮助您的访问者的功能。服务器端验证仍然很重要。）

我不得不说，这确实是一个弱验证。任何包含至少 1 个非空白字符的内容都将通过测试。人们将能够拥有像“！”这样的用户名。这不是非常棒，但这只是一些信息。

上jQuery Validate link you provided, they show an example form (along with a link of the same form in action)

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (optional)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
<script>
$("#commentForm").validate();
</script>

这个非常基本的示例展示了 Validate 的安装是多么简单，以及

的简单格式

<input name="ele" type="text" required>

与您尝试的验证级别完全相同。因此，首先，您几乎可以复制并粘贴代码。（除了您可以提出的不同要求外，设置 minlength 需要一定数量的字符，并且要求至少有一个不是空格）。

jQuery Validate 可能会非常广泛，但基本上很容易安装，一旦您熟悉了，就可以根据需要自定义类

最后一点，不要忽视对 CFForm 元素的蔑视。看起来其他人似乎无视您的问题，但事实并非如此。

老实说，它们是在互联网生活的不同时期开始出现的，但使用起来总是有点挑剔。对它们的扩展，在很多人看来，都做得不好，经常激化缺陷。

能够说 <cfinput...required> 是非常有吸引力的，但是标签变得很麻烦，而且您无法轻松地对它们进行您可能想要的精细控制。他们是拐杖，而且是生锈的拐杖。

您可以查看 CFUI The Right Way @ Github or this hosted version 以获得一些重要的见解和示例。

Answer 2

这是一篇旧博客文章，所以不确定今天的内容有多准确，但它展示了如何通过 _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>

Onclick 函数不适用于 CFINPUT 验证

Onclick function not working with CFINPUT validation

javascript

forms

coldfusion

cfinput

cfform