unable to stop form submitting during wrong captcha validation

Question

After wrong validation form goes to submitted 1. Jquery is :

function validate()
{
 if( document.myForm.capcode.value == "" )
   {
     alert( "Please type Code!" );
     document.myForm.capcode.focus() ;
  return false 
   }
   else if( document.myForm.capcode.value != "" ){
       $.ajax
                ({
                    type: "POST",
                    url: "checkcaptcha.php",
                    data: "captcha="+document.myForm.capcode.value,
                    success: function(msg)
                        {
                        if($.trim(msg) == '2'){
                            alert('Entered code is wrong');
                            reloadCaptcha()
                            return false;
                        }
                    }
                })
           
   }
   
   function reloadCaptcha()
    {
        jQuery('#siimage').prop('src', 'securityimage/securimage_show.php?sid=' + Math.random());
    }
  return( true );
}

2. Html start hare I am using secure image php cpatcha, captcha validation work but during wrong validation form should not be submitted :

2. Html start hare I am using secure image php cpatcha, captcha validation work but during wrong validation form should not be submitted :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="frmSignUp" action="/account/signup?a=1" name="myForm" method="post" onsubmit="return(validate());">
<table width="390" border="0" cellspacing="0" cellpadding="0" align="right"><td colspan="3" >
<div style="float: right;margin-right:26px;width:200px;">
<img id="siimage" align="left" style="padding-right: 5px; border: 0" src="/securityimage/securimage_show.php?sid={/application/random}"  />
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="19" height="19" id="SecurImage_as3" align="middle">
                                              <param name="wmode" value="opaque">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="http://cheersoye.com/securityimage/securimage_play.swf?audio=/securityimage/securimage_play.php&bgColor1=#777&bgColor2=#fff&iconColor=#000&roundedCorner=5" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="http://cheersoye.com/securityimage/securimage_play.swf?audio=http://cheersoye.com/securityimage/securimage_play.php&bgColor1=#777&bgColor2=#fff&iconColor=#000&roundedCorner=5" quality="high" bgcolor="#ffffff" width="19" height="19" name="SecurImage_as3" wmode="opaque" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object><br/>
<a tabindex="-1" style="border-style: none" href="#" title="Refresh Image" onclick="document.getElementById('siimage').src = '/securityimage/securimage_show.php?sid=' + Math.random(); return false"><img src="<?php echo IMAGE_URL; ?>/refresh.gif" alt="Reload Image" border="0" onclick="this.blur()" align="bottom" /></a></div></td></tr>
<tr><td class="log_label" colspan="2">Enter Code:</td>
<td><div id="" class="form-group">
<input name="confirmationcode" type="text" id="capcode" class="log_input" value="" /></div></td></tr>
<tr><td colspan="3" style="text-align:center;">
<input type="submit" value="Register" style="height:35px;" class="small_btn" /></td></tr></table>
</form>

score 1 · Answer 1 · answered Sep 23 '14 at 06:15

You need to do it in this way, Demo

var validated = false;
$("#frmSignUp").on("submit", function (e) {
    if (!validated) {
        e.preventDefault(); <-- this will stop the submit.
        var captchaCode = $("#capcode").val();
        if (captchaCode == "") {
            alert("Please type Code!");
            $("#capcode").focus();
            return false
        } else {
            $.ajax({
                type: "POST",
                url: "checkcaptcha.php",
                data: "captcha=" + captchaCode,
                success: function (msg) {
                    if ($.trim(msg) == '2') {
                        alert('Entered code is wrong');
                        reloadCaptcha();
                        return false;
                    }
                    validated = true;<-- this will mark as valid.
                    $("#frmSignUp").submit();<-- and submit the page again. since this is validated now it will not prevent the submit.
                }
            });
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="frmSignUp" action="/account/signup?a=1" name="myForm" method="post">
    <table width="390" border="0" cellspacing="0" cellpadding="0" align="right">
        <td colspan="3">
            <div style="float: right;margin-right:26px;width:200px;">
                <img id="siimage" align="left" style="padding-right: 5px; border: 0" src="/securityimage/securimage_show.php?sid={/application/random}" />
                <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="19" height="19" id="SecurImage_as3" align="middle">
                    <param name="wmode" value="opaque" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="false" />
                    <param name="movie" value="http://cheersoye.com/securityimage/securimage_play.swf?audio=/securityimage/securimage_play.php&bgColor1=#777&bgColor2=#fff&iconColor=#000&roundedCorner=5" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <embed src="http://cheersoye.com/securityimage/securimage_play.swf?audio=http://cheersoye.com/securityimage/securimage_play.php&bgColor1=#777&bgColor2=#fff&iconColor=#000&roundedCorner=5" quality="high" bgcolor="#ffffff" width="19" height="19" name="SecurImage_as3" wmode="opaque" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
                </object>
                <br/>
<a tabindex="-1" style="border-style: none" href="#" title="Refresh Image" onclick="document.getElementById('siimage').src = '/securityimage/securimage_show.php?sid=' + Math.random(); return false"><img src="<?php echo IMAGE_URL; ?>/refresh.gif" alt="Reload Image" border="0" onclick="this.blur()" align="bottom" /></a>

            </div>
        </td>
        </tr>
        <tr>
            <td class="log_label" colspan="2">Enter Code:</td>
            <td>
                <div id="" class="form-group">
                    <input name="confirmationcode" type="text" id="capcode" class="log_input" value="" />
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="3" style="text-align:center;">
                <input type="submit" value="Register" style="height:35px;" class="small_btn" />
            </td>
        </tr>
    </table>
</form>

score 0 · Answer 2 · answered Sep 23 '14 at 05:57

0

Add this line to prevent form from submission if captcha code is empty or wrong.

$("form").submit(function(e){ e.preventDefault(); });

answered Sep 23 '14 at 05:57

cartina

1,409
13
21

score 0 · Answer 3 · answered Sep 23 '14 at 06:01

Have a look at blow codes, you return is not passed at else if section;

 if( document.myForm.capcode.value == "" ){
   alert( "Please type Code!" );
   document.myForm.capcode.focus() ;
   return false 
 }else if( document.myForm.capcode.value != "" ){
    var valid = true;
    $.ajax({
                type: "POST",
                url: "checkcaptcha.php",
                data: "captcha="+document.myForm.capcode.value,
                success: function(msg)
                    {
                    if($.trim(msg) == '2'){
                        alert('Entered code is wrong');
                        reloadCaptcha()
                        valid = false;
                    }
                }
            })
       return valid;
 }

unable to stop form submitting during wrong captcha validation

3 Answers3