django-recaptcha doesn't validate the input

StackOverflow https://stackoverflow.com/questions/21596627

Question

I am trying to integrate django-recaptcha with django-registration. I have already make sure that the django-registration works. Then I install and configure django-recaptcha according to its document (django-recaptcha 0.0.6).

I add the captcha = ReCaptchaField() in RegistrationForm class in registration/forms.py as follow:

from captcha.fields import ReCaptchaField

class RegistrationForm(forms.Form):
    required_css_class = 'required'
    username = forms.RegexField(regex=r'^[\w.@+-]+$', max_length=30, label=_("Username"), error_messages={'invalid': _("This value may contain only letters, numbers and @/./+/-/_ characters.")})
    email = forms.EmailField(label=_("E-mail"))
    password1 = forms.CharField(widget=forms.PasswordInput, label=_("Password"))
    password2 = forms.CharField(widget=forms.PasswordInput, label=_("Password (again)"))

    captcha = ReCaptchaField()

    ...

The captcha does show up, but no matter what I typed in the chptcha text (type nothing, correct, or incorrect), after press the "Bottom", it always shows "This field is required." (of course I have entered the two password field).

captcha error

It should not be the private/public key problem as with incorrect setting the captcha will not show up, but a error text. Any idea?

BTW, I use python 2.7 with django 1.4.3. And I have tested two browsers: chrome and IE9.

[UPDATED]

I found the root cause of this problem is because the text I typed does not pass to POST request shown as follow:

POST:<QueryDict: {u'username': [u'test123'], u'password1': [u'123'], u'csrfmiddlewaretoken': [u'BUvEURhlUMYDx1DjztgdRuK1CrI7WanY'], u'email': [u'test@gmail.com'], u'password2': [u'123']}>,

The html source code shown on client browser is displayed as follow. Normally it should have "recaptcha_challenge_field" in the POST request, but I do not sure why client browser do not send out this variable in the POST request. I am completely new to java script. Any idea?

<!doctype html>
<html>
    <head>
        <title>Register for an account</title>
    </head>
    <body>

<table>
    <form method='post' action=''><div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='BUvEURhlUMYDx1DjztgdRuK1CrI7WanY' /></div>
        <tr class="required"><th><label for="id_username">Username:</label></th><td><input id="id_username" type="text" name="username" maxlength="30" /></td></tr>
<tr class="required"><th><label for="id_email">E-mail:</label></th><td><input type="text" name="email" id="id_email" /></td></tr>
<tr class="required"><th><label for="id_password1">Password:</label></th><td><input type="password" name="password1" id="id_password1" /></td></tr>
<tr class="required"><th><label for="id_password2">Password (again):</label></th><td><input type="password" name="password2" id="id_password2" /></td></tr>
<tr class="required"><th><label for="id_captcha">Captcha:</label></th><td><script type="text/javascript">
    var DjangoRecaptchaOptions = {
  "lang": "en"
};
    if (typeof RecaptchaOptions !== 'object') {
        RecaptchaOptions = DjangoRecaptchaOptions;
    } else {
        for (key in DjangoRecaptchaOptions) {
            RecaptchaOptions[key] = DjangoRecaptchaOptions[key];
        }
    }
</script>
<script type="text/javascript" src="https://www.google.com/recaptcha/api/challenge?k=6LeuNO4SAAAAAAdkaCUi6ybtISPI-YhIlOadgFNF&hl=en"></script>
<noscript>
  <iframe src="https://www.google.com/recaptcha/api/noscript?k=6LeuNO4SAAAAAAdkaCUi6ybtISPI-YhIlOadgFNF&hl=en" height="300" width="500" frameborder="0"></iframe><br />
  <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
  <input type='hidden' name='recaptcha_response_field' value='manual_challenge' />
</noscript>
</td></tr>
        <tr><td></td><td><input type="submit" value="Send activation email" /></td>
    </form>
</table>

    </body>
</html>
Was it helpful?

Solution

I found the answer! It is because of the <table> tag in registration_form.html, the one provided by django-registration package. The content is:

{% extends "registration/registration_base.html" %}
{% load i18n %}
{% block title %}{% trans "Register for an account" %}{% endblock %}
{% block content %}
<table>
    <form method='post' action=''>{% csrf_token %}
        {{ form }}
        <tr><td></td><td><input type="submit" value="{% trans "Send activation email" %}" /></td>
    </form>
</table>
{% endblock %}

Unfortunately, recaptcha has another <table> tag embedded in its java script, which means there will have the recaptcha <table> tag inside registration_form <table> tag. Though browser can correctly render the page, however, it does not correctly retrieve the field such as "recaptcha_challenge_field" and "recaptcha_response_field" in the embedded <table>

The solution is to remove the <table> related tag from the registration_form.html.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top