Capatcha Security image for submiting form

Discussion in 'PHP' started by piri00, Jun 12, 2010.

  1. #1
    Hi
    This is nice script http://www.white-hat-web-design.co.uk/articles/php-captcha.php
    but when I added this to my form then from this time my form is processing on submit even my javascript fields validation is not correct. Alert box says that for example "email is not correct" when i click ok I should have chance to correct email address but still it process the form.
    When I take out this capatcha image security everything works fine.
    Any help please? Thank you

    This is my form code:
    <form action="process.php" method="post" name="crew_form" onsubmit="MM_validateForm('name','','R','email','','RisEmail');return document.MM_returnValue, check_it();">
    <tr>
    <td>Name</td>
    <td><input name="name" type="text" id="name" size="25"></td>
    </tr>
    <tr>
    <td>Email</td>
    <td><input name="email" type="text" id="email" size="25"></td>
    </tr>
    <tr>
    <td colspan="2"><br /><strong>What is your specialisation:</strong></td>
    </tr>
    <tr>
    <td>Director</td>
    <td><input type="checkbox" name="director"></td>
    </tr>
    <tr>
    <td>Producer</td>
    <td><input type="checkbox" name="producer"></td>
    </tr>
    <tr>
    <td>Camera</td>
    <td><input type="checkbox" name="camera"></td>
    </tr>
    <tr>
    <td>Sound</td>
    <td><input type="checkbox" name="sound"></td>
    </tr>
    <tr>
    <td>Researcher
    <td><input type="checkbox" name="researcher"></td>
    </tr>
    <tr>
    <td>Production assistant</td>
    <td><input type="checkbox" name="production_assistant"></td>
    </tr>
    <tr>
    <td>Runner</td>
    <td><input type="checkbox" name="runner"></td>
    </tr>
    <tr>
    <td>Link to showreel</td>
    <td><input type="text" name="showreel" id="url" size="25"></td>
    </tr>
    <tr>
    <td colspan="2" align="center"><img src="CaptchaSecurityImages.php" />
    <br />Security code:<?php echo $incorrect; ?><br />
    <input id="security_code" name="security_code" type="text" /></td>
    </tr>
    <tr>
    <td align="center" colspan="2"><input type="submit" value="submit"></td>
    </tr>
    </form></table>
    HTML:

     
    piri00, Jun 12, 2010 IP
  2. roopajyothi

    roopajyothi Active Member

    Messages:
    1,302
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    80
    #2
    Give me the JS
    Let me have a look!
     
    roopajyothi, Jun 12, 2010 IP
  3. piri00

    piri00 Peon

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi Thanks for reply here is the javascript which is from dreamweaver...

    function MM_validateForm() { //v4.0
      if (document.getElementById){
        var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
        for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
          if (val) { nm=val.name; if ((val=val.value)!="") {
            if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
              if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
            } else if (test!='R') { num = parseFloat(val);
              if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
              if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
                min=test.substring(8,p); max=test.substring(p+1);
                if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
          } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
        } if (errors) alert('The following error(s) occurred:\n'+errors);
        document.MM_returnValue = (errors == '');
    } }
    //-->
    </script>
    HTML:
     
    piri00, Jun 12, 2010 IP
  4. mehmetm

    mehmetm Well-Known Member

    Messages:
    134
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    110
    #4
    you can use recaptcha api. it's very useful.
     
    mehmetm, Jun 12, 2010 IP
  5. roopajyothi

    roopajyothi Active Member

    Messages:
    1,302
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    80
    #5
    Yeah this is Valuable Suggestion
    But Sometime recaptcha should not be implemented in Sales Page Contact Form a Simple captcha is provided there to avoid just normal bots
    Since ReCaptcha Takes more time then normal many have a thought of skipping it
     
    roopajyothi, Jun 12, 2010 IP
  6. piri00

    piri00 Peon

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thanks for your replays. I will try to check recaptcha api :).
    Just want to let you know I found the problem... is "onsubmit event" I have there two function to check
    onsubmit="MM_validateForm('name','','R','email','','RisEmail');return document.MM_returnValue, check_it();">
    HTML:
    That makes that problem.
    When I take off function check_it() everything is fine.
    Actually it works if there is only one function in "onsubmit"
    Then How can I use two function in one onsubmit event? (maybe I separate them with wrong character like ; or ,)
    Sorry for this because it became javascript problem now not PHP
     
    piri00, Jun 13, 2010 IP
  7. krsix

    krsix Peon

    Messages:
    435
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #7
    with recaptcha you really only have to get one out of two words right.. much shorter
     
    krsix, Jun 14, 2010 IP
  8. roopajyothi

    roopajyothi Active Member

    Messages:
    1,302
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    80
    #8
    Oops!
    But at time i get annoyed on that since they are so twisted to understand!
     
    roopajyothi, Jun 15, 2010 IP
  9. krsix

    krsix Peon

    Messages:
    435
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #9
    [​IMG]
     
    krsix, Jun 15, 2010 IP
  10. roopajyothi

    roopajyothi Active Member

    Messages:
    1,302
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    80
    #10
    Yeah its too hard to read!!!
     
    roopajyothi, Jun 15, 2010 IP
  11. gapz101

    gapz101 Well-Known Member

    Messages:
    524
    Likes Received:
    8
    Best Answers:
    2
    Trophy Points:
    150
    #11
    yah but that's why there is reload button....
     
    gapz101, Jun 15, 2010 IP
  12. Team-Allita-Inc.

    Team-Allita-Inc. Peon

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Try at the onsubmit event action adding after each, if you are using more than one function: For example: MM_validateForm('name','','R','email','','RisEmail'); adding "return false;"
     
    Team-Allita-Inc., Jun 18, 2010 IP
  13. danx10

    danx10 Peon

    Messages:
    1,179
    Likes Received:
    44
    Best Answers:
    2
    Trophy Points:
    0
    #13
    Thats the purpose, to make it confusing so it can't be bypassed automatedly via OCR/bots.
     
    danx10, Jun 18, 2010 IP
  14. Team-Allita-Inc.

    Team-Allita-Inc. Peon

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    You can always try to switch to other function that will work better as by using the alert function will prevent the page to submit the form to the output page..It might be a bit annoying, but it has worked for me.....

    I suggest this approach as is let;s say more coder friendly and specific if you want later on to add any other fields, you need to use the name of the field to refer to the message error in case you want it to be mandatory.

    Save this as a .js file and point appropriately on the head section: Let;s name it validate.js


    <!--
    /***Validation of required fields - AB Panama Contact Form - Compressed JS --JP***/
    
    function formCheck(formobj){
    	// Enter name of mandatory fields
    	var fieldRequired = Array("nombre", "email", "country", "city", "phone", "mesa","captcha_code");
    	// Enter field description to appear in the dialog box
    	var fieldDescription = Array("Name", "E-mail address", "Country", "City", "Phone Number", "Message", "Anti-Spam Bot Image verification");
    	// dialog message
    	var alertMsg = "Please complete the following fields:\n\n";
    	
    	var l_Msg = alertMsg.length;
    	
    	for (var i = 0; i < fieldRequired.length; i++){
    		var obj = formobj.elements[fieldRequired[i]];
    		if (obj){
    			switch(obj.type){
    			case "select-one":
    				if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
    					alertMsg += " - " + fieldDescription[i] + "\n";
    				}
    				break;
    			case "select-multiple":
    				if (obj.selectedIndex == -1){
    					alertMsg += " - " + fieldDescription[i] + "\n";
    				}
    				break;
    			case "text":
    			case "textarea":
    				if (obj.value == "" || obj.value == null){
    					alertMsg += " - " + fieldDescription[i] + "\n";
    				}
    				break;
    			default:
    			}
    			if (obj.type == undefined){
    				var blnchecked = false;
    				for (var j = 0; j < obj.length; j++){
    					if (obj[j].checked){
    						blnchecked = true;
    					}
    				}
    				if (!blnchecked){
    					alertMsg += " - " + fieldDescription[i] + "\n";
    				}
    			}
    		}
    	}
    
    	if (alertMsg.length == l_Msg){
    		return true;
    	}else{
    		alert(alertMsg);
    		return false;
    	}
    }
    // -->
    Code (markup):

    Refer to the name of the field within the form, as they need to have the same name.

    Anywhere within the Head of the document <HEAD> ... </head>

    <script type="text/javascript" src="validate.js"></script>
    Code (markup):
    <Body> .. Then on the form action:

    <form action="output_page.php" name="formulario"  method="post" onsubmit="[B]return formCheck(this);[/B]">
    Code (markup):
    You need to match the <input name value with the name that you are giving even if you are pointing to the captcha security image... Play with it and have fun..

    
    <div align="left">
                <textarea name="mesa" style="BACKGROUND-COLOR:#666666;border-right:2px double #8EBC3C;border-bottom:2px double #8EBC3C;border-top:2px double #8EBC3C;border-left:2px double #8EBC3C;font-weight:bolder;scrollbar-arrow-color:#EF7838;scrollbar-track-color:#666666;"  cols="22" rows="6"></textarea><br><br>
    			<img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image" >
    			<input type="text" style="BACKGROUND-COLOR:#666666;border-right:2px double #8EBC3C;border-bottom:2px double #8EBC3C;border-top:2px double #8EBC3C;border-left:2px double #8EBC3C;font-weight:bolder;" name="captcha_code" size="10" maxlength="6">
    			<a href="#" class="breadcrumbs" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false">Reload Image</a></div>
    Code (markup):
    Example: abpanama(.)com/form(.)php

    Happy coding!
     
    Team-Allita-Inc., Jun 18, 2010 IP
  15. roopajyothi

    roopajyothi Active Member

    Messages:
    1,302
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    80
    #15
    Whether OCR here stands for Optical Character Recognition???

    @gapz101: Right! But many annoy on that too! A visitor might always like to fill out the forms as quick as we do :)
     
    roopajyothi, Jun 18, 2010 IP
  16. Team-Allita-Inc.

    Team-Allita-Inc. Peon

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    I meant annoying as if you hit the submit button it will prompt to you the alert window from the browser, but it will happen on the onsubmit event, therefore if there is no error it should just work...Perhaps you could suggest a solution and stop winin'? ;)
     
    Last edited: Jun 18, 2010
    Team-Allita-Inc., Jun 18, 2010 IP