1

I’m using EE 2.7.2 and Snaptcha 1.7

I’ve applied Snaptcha to my Solspace User registration form, however it is causing all form submissions to fail the security test.

My only thought is that maybe Snaptcha somehow doesn’t work if the form is loaded into a modal box via ajax? I have all my login and registration forms in modal boxes via ajax.

* Edit - see comment below. I've tested without ajax or modal box and it still fails every time *

Any thoughts on why is would continuously fail?

Here’s a sample of my generated source code after the registration form is pulled in:

 <article style="display: block; opacity: 1; visibility: visible; top: 70px;" class="reveal-modal ajax-container open" id="sign-up-2"><h3>Create an Account</h3><form class="edit invert validate-edit require-terms">

<div class="hiddenFields">
<input name="ACT" value="86" type="hidden">
<input name="RET" value="http://dev.weddingwise.co.nz/account/new" type="hidden">
<input name="params_id" value="JgBTwOKNvKPcwHZPUEnbWhKlP" type="hidden">
<input name="site_id" value="1" type="hidden">
</div>


  <fieldset>
   <ul class="form-row">
    <li>
     <label>Email Address</label>
     <input name="username" class="required email" title="Valid email required" type="text">
     <p class="expl">This will be your login username</p>
    </li>
    <li>
     <label>Your Name</label>
     <input name="screen_name" class="required" title="Required" type="text">
     <p class="expl">Displayed on your public profile</p>
    </li>
    <li>
     <label>Password</label>
     <input name="password" class="required" title="Required" type="password">
     <p class="expl"></p>
    </li>
    <li>
     <label>Repeat Password</label>
     <input name="password_confirm" class="required" title="Required" type="password">
     <p class="expl"></p>
    </li>
  </ul></fieldset>
  <footer>
   <p class="terms">By submitting this form I agree to the <a href="/terms" target="_blank">Terms &amp; Privacy</a></p>
   <a class="btn submit" href="#">Sign Up</a>
   <a class="btn secondary close-reveal-modal" href="#">Cancel</a>
  </footer>
  <div class="snap" style="position: absolute !important; top: -10000px !important;"><input id="snap_AEHBdrbOW" name="snap_AEHBdrbOW" value="GDYgTIvztsTqb" type="text"></div>

 </form></article>

Here's source of registration page when displayed inline on its own page with no ajax or modal box:

<!doctype html>
<!--[if lt IE 9]> <html class="ie" lang="en"> <![endif]-->
<!--[if gte IE 9]><!--> <html lang="en"> <!--<![endif]-->
<head>
    <title>Sign Up: step 2</title>
    <meta name="description" content="">
    <!-- meta -->
<meta charset="utf-8">
<meta http-equiv="cleartype" content="on">
<!-- css -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/style.css">
<!-- js -->
<script src="/js/modernizr-2.6.2.min.js"></script>
<script src="/js/detectizr.min.js"></script>
<!-- iOS -->
<meta name="viewport" content="width=device-width" />
<link rel="apple-touch-icon-precomposed" href="/app-icon.png"/>
</head>
<body>

    <article class="modal" id="sign-up-2">
    <h3>Create an Account</h3>
    <form class="edit invert validate-edit require-terms">
    <form name="register" class="edit invert validate-edit" id="member_form" method="post" action="http://dev.weddingwise.co.nz/"  >
<div class='hiddenFields'>
<input type="hidden" name="ACT" value="86" />
<input type="hidden" name="RET" value="http://dev.weddingwise.co.nz/account/new" />
<input type="hidden" name="params_id" value="hDwJbIxhVaWjeacFTvDriXRXE" />
<input type="hidden" name="site_id" value="1" />
</div>


        <fieldset>
            <ul class="form-row">
                <li>
                    <label>Email Address</label>
                    <input type="text" name="username" class="required email" title="Valid email required" />
                    <p class="expl">This will be your login username</p>
                </li>
                <li>
                    <label>Your Name</label>
                    <input type="text" name="screen_name" class="required" title="Required" />
                    <p class="expl">Displayed on your public profile</p>
                </li>
                <li>
                    <label>Password</label>
                    <input type="password" name="password" class="required" title="Required" />
                    <p class="expl"></p>
                </li>
                <li>
                    <label>Repeat Password</label>
                    <input type="password" name="password_confirm" class="required" title="Required" />
                    <p class="expl"></p>
                </li>
        </fieldset>
        <footer>
            <p class="terms">By submitting this form I agree to the <a href="/terms" target="_blank">Terms &amp; Privacy</a></p>
            <a class="btn submit" href="#">Sign Up</a>
            <a class="btn secondary close-reveal-modal" href="#">Cancel</a>
        </footer>
        <div class="snap" style="position: absolute !important; top: -10000px !important;"><input type="text" id="snap_eSHSeRWPh" name="snap_eSHSeRWPh" value="UkdZCBwrGTtQq" /></div>
<script type="text/javascript">document.getElementById("snap_eSHSeRWPh").value = "iRewkBhZSaFgs";</script>

    </form>
    </article>

<!-- js -->
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/jquery.easing.1.3.js"></script>
<script src="/js/jquery.autosize.min.js"></script>
<script src="/js/jquery.maxlength.min.js"></script>
<script src="/js/jquery.equalheightcolumns.js"></script>
<script src="/js/jquery.scrollTo-1.4.3.1-min.js"></script>
<script src="/js/jquery.localscroll-1.2.7-min.js"></script>
<script src="/js/jquery.serialScroll-1.2.2-min.js"></script>
<script src="/js/ui/jquery.ui.core.js"></script>
<script src="/js/ui/jquery.ui.widget.js"></script>
<script src="/js/ui/jquery.ui.mouse.js"></script>
<script src="/js/ui/jquery.ui.sortable.js"></script>
<script src="/js/ui/jquery.ui.datepicker.js"></script>
<script src="/js/jquery.selectBoxIt.js"></script>
<script src="/js/jquery.icheck.min.js"></script>
<script src="/js/jquery.isotope.min.js"></script>
<script src="/js/jquery.stickem.js"></script>
<script src="/js/jquery.validate.min.js"></script>
<script src="/js/spin.min.js"></script>
<script src="/js/jquery.spin.js"></script>
<script src="/js/foundation.js"></script>
<script src="/js/foundation.reveal.js"></script>
<script src="/js/jquery.fitvids.js"></script>
<script src="/js/jquery.infinitescroll.js"></script>
<script src="/js/imagesloaded.min.js"></script>
<script src="/js/init.js"></script> 
<script src="/js/lookbook.js"></script>
</body>
</html>

Here's actual template code for registration page:

<!doctype html>
{embed-ie}
<head>
    <title>Sign Up: step 2</title>
    <meta name="description" content="">
    {embed-head}
</head>
<body>

    <article class="modal" id="sign-up-2">
    <h3>Create an Account</h3>
    <form class="edit invert validate-edit require-terms">
    {exp:user:register 
            form:class="edit invert validate-edit" 
            form:name="register" 
            return="/profile/new"
            admin_register="yes"  
            group_id="{segment_3}"
            allowed_groups="5|8" 
            required="screen_name"    
        }
        <fieldset>
            <ul class="form-row">
                <li>
                    <label>Email Address</label>
                    <input type="text" name="username" class="required email" title="Valid email required" />
                    <p class="expl">This will be your login username</p>
                </li>
                <li>
                    <label>Your Name</label>
                    <input type="text" name="screen_name" class="required" title="Required" />
                    <p class="expl">Displayed on your public profile</p>
                </li>
                <li>
                    <label>Password</label>
                    <input type="password" name="password" class="required" title="Required" />
                    <p class="expl"></p>
                </li>
                <li>
                    <label>Repeat Password</label>
                    <input type="password" name="password_confirm" class="required" title="Required" />
                    <p class="expl"></p>
                </li>
        </fieldset>
        <footer>
            <p class="terms">By submitting this form I agree to the <a href="/terms" target="_blank">Terms &amp; Privacy</a></p>
            <a class="btn submit" href="#">Sign Up</a>
            <a class="btn secondary close-reveal-modal" href="#">Cancel</a>
        </footer>
        {exp:snaptcha:field}
    {/exp:user:register}
    </article>

    {embed-foot}    

</body>
</html>
Improve this question
7
  • To confirm if it is ajax, have you tried placing the code inline and testing the functionality. I'd wager its ajax centric but until you've tested it cannot comment.
    – stuartmcd69
    Commented Jan 16, 2014 at 9:27
  • I've tried it inline on it's own page now and it still fails. So my original suspicion that it was due to the ajax or modal box was incorrect. What else would cause it to fail every time?
    – Benek Lisefski
    Commented Jan 16, 2014 at 21:35
  • Try throwing up your actual template code. BTW- what's with the 20 JavaScript's ? That's insane. I have to ponder now what exactly is failing. What errors or messages are you getting ?
    – stuartmcd69
    Commented Jan 16, 2014 at 22:09
  • @stuartmcd69 - template code has been added above. I'll combine/compress all the javascripts when site is out of dev ;-)
    – Benek Lisefski
    Commented Jan 16, 2014 at 22:39
  • When you say fail - what does that mean exactly ? Error on page, JS error, spam error ?????
    – stuartmcd69
    Commented Jan 17, 2014 at 5:02

1 Answer 1

Reset to default
1

in your template code you have an opening form tag before your user tag:

<form class="edit invert validate-edit require-terms">
{exp:user:register

and therefore your output looks like this:

<form class="edit invert validate-edit require-terms">
<form name="register" class="edit invert validate-edit" id="member_form" method="post" action="http://dev.weddingwise.co.nz/"  >

which is obviously not what you want. remove the first form tag (the hard-coded one) and this should fix the Snaptcha issue.

Snatcha can work with ajax however your modal registration form seems to be missing the JavaScript code that Snaptcha automatically adds so the input field is not being modified with the correct value.

Improve this answer
3
  • Yes thank you. That does fix it. However it still doesn't work when ajaxed into a modal box. Are you aware of a particular reason why it would not work in that case? Do you know of successful implementation when used in an ajax modal box?
    – Benek Lisefski
    Commented Jan 19, 2014 at 20:59
  • Just to expand on this: the registration form works with Snaptcha when in a modal box populated with inline code from the same page. It fails if I try to inject the registration form into the modal box via ajax. I can live with doing it the first way but would prefer the second if it's possible.
    – Benek Lisefski
    Commented Jan 20, 2014 at 0:08
  • I updated my answer indicating that the necessary javascript is missing
    – Ben Croker
    Commented Jan 20, 2014 at 9:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.