提交前进行CFForm验证和onclick

Question

I have been trying to validate a few fields before submitting a form. Once the fields are validated by CF I want to pop up a sign in form if the user is not signed in. However, the problem is that the sign in form is pop up without validation.

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

The "signin" function will pop up the sign in form.

What I have tried so far besides the above:

1. onSubmit instead of onClick. But I don't want to submit the form until the user is signed in.
2. putting the onClick in the CFFORM tag but CF validation and sign in screen will pop up at the same time. After dismiss the CF fields validation screen but only complete the sign in screen will submit the blank form ie no validation.
3. using CFINPUT tag instead of INPUT. Made no difference but also messed up the button text.

Any help is appreciated. Thanks in advance.

Answer 1

@Jack, This is just an example of form fields validation using ajax. In order to use it you may need to make some changes to it. Moreover, I preferred using html forms in this simple example. Let say we have a validatoin.cfc with a method name 'validation' which takes an arg.

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

And here is code for cfm file.

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