1

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

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

(ps我在这里看到了其他类似的案例,但没有给出答案)

代码如下所示:

    <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()">
....

请帮忙。谢谢你。

4

2 回答 2

0

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

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

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

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

您提供的 jQuery Validate 链接上,它们显示了一个示例表单(以及一个相同表单的链接)

<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或这个托管版本,以获得一些很好的见解和示例。

于 2015-02-15T06:20:25.110 回答
0

这是一篇旧博文,因此不确定今天的情况有多准确,但它显示了如何通过 _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>
于 2015-02-16T14:46:55.893 回答