javascript - 提交前 CFForm 验证和 onclick

Question

我一直在尝试在提交表单之前验证一些字段。一旦 CF 验证了字段，如果用户未登录，我想弹出一个登录表单。但是，问题是弹出登录表单时未经验证。

查询.cfm

<cfif not isdefined("form.p1")>
    <cfform name="inquire" action="inquiry.cfm" method="post">
    <input type="hidden" name="p1" value="1">
    <cfinput type="text" name="email" size="50" maxlength="50" required="yes" autofocus="on" validate="email">
    <cfinput type="text" name="subject" size="50" maxlength="50" required="yes" validate="noblanks">
    <cftextarea name="message" cols="45" rows="8" wrap="soft" required="yes" validate="noblanks"></cftextarea>
    <cfif signedin>
        <input type="submit" value=" Send "> 
    <cfelse>
        <input type="submit" value=" Send " onclick="signin(); return false">
    </cfif>
<cfelse>
    do stuff....
</cfif>

“登录”功能将弹出登录表单。

除了上述之外，到目前为止我还尝试过:

1. onSubmit 而不是 onClick。但在用户登录之前我不想提交表单。
2. 将 onClick 放在 CFFORM 标记中，但 CF 验证和登录屏幕将同时弹出。关闭 CF 字段验证屏幕但仅完成登录屏幕后将提交空白表单，即不进行验证。
3. 使用 CFINPUT 标签而不是 INPUT。没有什么区别，但也弄乱了按钮文本。

感谢任何帮助。提前致谢。

Answer 1

@Jack，这只是使用 ajax 验证表单字段的示例。为了使用它，您可能需要对其进行一些更改。此外，我更喜欢在这个简单的示例中使用 html 表单。 假设我们有一个 validatoin.cfc，其方法名称为“validation”，它带有一个参数。

  <cffunction name="validation" access="remote" returntype="any" returnformat="JSON" output="false">
    <cfargument name="args" type="any" default="">
   <cfset var retval ='{"return":"false"}'>
    <cfif len(trim(arguments.args))>
        <cfset retval =  '{"return":"true"}'>
    </cfif>
    <cfreturn retval>
</cffunction>

这是 cfm 文件的代码。

    <div  id="target">
  <form name="inquire" action="TestOne.cfm" method="post">
    <input type="hidden" name="p1" value="1">
    <input id="email" type="text" name="email" size="50" maxlength="50" required="yes" autofocus="on" validate="email" ><br><br>
    <input type="text" name="subject" size="50" maxlength="50" required="yes" validate="noblanks" ><br><br>
    <textarea name="message" cols="45" rows="8" wrap="soft" required="yes" validate="noblanks"  ></textarea>
  </form>
  </div>

<script>
    jQuery("#target").on( "click", function(){
        var d = $('#email').val();
        $.ajax({
            type: 'POST',
            url: 'validation.cfc?method=validation',
            dataType: "json",
            data: { args: d },
            success: function(data) {
                 if(data.return != 'true'){
                     alert("Please enter an valid email address");                 }
            }
        });
    }
</script>