CODEWITHSUNDEEP
javascriptformsvalidationcaptcha
5kud
5kud

Reputation: 337

javascript captcha and form not submitting

I have a simple mathematical captcha that seems to work however it now does not allow me to submit my form.

https://jsfiddle.net/qm24Lps8/2/

The js fiddle above contains the full code - bellow is the bottom half of the form. The captcha is amended to the bottom of the message box. There is also the javascript that runs the captcha.

What have I done wrong that stops the form from submitting?

  <div class="mxm-form-item " id="mxm-form-2446-field-3">
                        <div class="mxm-form-field">
                            <textarea rows="2" name="Default.message" id="mxm-form-2446-field-3-el" class="mxm-form-element mxm-form-textarea" onfocus="clearDefaultandCSS(this)">How can we help?</textarea>
                        </div>
                        <div class="mxm-clear"></div>
                    </div>
                    <div class="mxm-form-item " id="mxm-form-38124-field-3">
                        <div class="mxm-form-field">
                            <input type="hidden" name="Default.brochure request" value="no" />
                            <input id="mxm-form-38124-field-3-el" type="checkbox" name="Default.brochure request" value="yes" class="mxm-form-element mxm-form-booleancheckbox" />
                            <label for="mxm-form-38124-field-3-el" class="mxm-form-cb-label">Download our brochure</label>
                        </div>
                        <div class="mxm-clear"></div>
                    </div>
                    <div class="mxm-form-item " id="mxm-form-38124-field-4">
                        <div class="mxm-form-field">
                            <label style="width:120px;" class="mxm-form-item-label"></label>
                            <input type="submit" value="Submit" class="mxm-form-element mxm-form-button" onclick="return(validate());" />
                        </div>
                        <div class="mxm-clear"></div>
                    </div>
                </form>
            </div>
        </div>
        </div>
    </div>

$(function(){

var mathenticate = {
    bounds: {
        lower: 5,
        upper: 50
    },
    first: 0,
    second: 0,
    generate: function()
    {
        this.first = Math.floor(Math.random() * this.bounds.lower) + 1;
        this.second = Math.floor(Math.random() * this.bounds.upper) + 1;
    },
    show: function()
    {
        return this.first + ' + ' + this.second;
    },
    solve: function()
    {
        return this.first + this.second;
    }
};
mathenticate.generate();

var $auth = $('<input type="text" name="auth" />');
$auth
    .attr('placeholder', mathenticate.show())
    .insertAfter('textarea[name="Default.message"]');

$('#mxm-form-38124').on('submit', function(e){
    e.preventDefault();
    if( $auth.val() != mathenticate.solve() )
    {
        alert('wrong answer!');
    }
});

});

Upvotes: 0

Views: 93

Answers (1)

Jenson M John
Jenson M John

Reputation: 5689

Check whether Validate() function defined. It throws error on submit button event.

Upvotes: 1

Related Questions