Question

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

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

（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个非空白字符组成的内容都将通过测试。人们将能够拥有像＃34;！＆＃34;这样的用户名。这不是什么风扇，但这只是一些信息。

在jQuery Validate link you provided上，他们会显示一个示例表单（以及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或此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看起来那些函数是_CF_checkCFForm_1那么这样的东西会让你朝着正确的方向前进：

<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验证

2 个答案: