不使用CFINPUT验证的Onclick函数

Question

我正在尝试使用CFINPUT验证字段，然后调用一个弹出窗口函数在提交表单之前执行更多的操作，但它不起作用。onclick函数似乎是CFINPUT验证的先例。当我单击Submit按钮时，它首先调用弹出窗口函数，而不验证字段。我需要它：

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的那个版本，那么这样的函数应该会使您朝着正确的方向前进，在这些安装中的函数类似于_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>

Answer 2

您要进行的cfinput验证相当于客户端。

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

(编辑:这并不意味着您应该完全依赖于客户端验证。客户端验证更像是帮助访问者的一项功能。服务器端验证仍然很重要。)

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

在您提供的jQuery验证链接上，它们显示了一个示例表单(以及同样形式的行动的一个链接)

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

这个非常基本的示例展示了如何简单地进行验证，以及

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

与您所尝试的验证级别完全相同。因此，首先，您几乎可以复制和粘贴代码。(除了您可以提出的不同要求之外，设置最小长度还需要一定数量的字符，并且至少需要一个不是空格)。

jQuery验证可以得到相当广泛的应用，但基本上安装起来非常容易，一旦您熟悉了，就可以根据需要定制类。

最后，不要忽视对CFForm元素的鄙视。似乎其他人对你的问题漠不关心，但事实并非如此。

老实说，他们是在互联网生活的不同时期开始被介绍的，但一直以来都有点挑剔。在许多人的意见中，对它们的扩展并没有做好，而且经常使缺陷更加恼怒。

能够说<cfinput...required>是超级吸引人的，但是标签会变得很讨厌，而且你不容易对它们有你想要的很好的控制。他们是拐杖，还有生锈的拐杖。

您可以查看CFUI正确的方式@ Github或这个托管版本以获得一些很好的洞察力和示例。