Html5 Form with Captcha: <html> <head> <script type="text/javascript"> //Created / Generates the captcha function function DrawCaptcha() { var a = Math.ceil(Math.random() * 6)+ ''; var b = Math.ceil(Math.random() * 6)+ ''; var c = Math.ceil(Math.random() * 6)+ ''; var d = Math.ceil(Math.random() * 6)+ ''; var e = Math.ceil(Math.random() * 6)+ ''; var f = Math.ceil(Math.random() * 6)+ ''; var g = Math.ceil(Math.random() * 6)+ ''; var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f ; document.getElementById("txtCaptcha").value = code } </script> <script type="text/javascript"> // Remove the spaces from the entered and generated code function removeSpaces(string){ return string.split(' ').join(''); } </script> </head> <body onload="DrawCaptcha();"> <form name="value"> Name <input type="text" required pattern="^[a-zA-Z0-9]{4,12}$" value="" /> Email:<input type="text" required pattern="^[a-zA-Z0-9-\_.]+@[a-zA-Z0-9-\_.]+\.[a-zA-Z0-9.]{2,5}$" value="" /> Phone:<input type="text" required pattern="^[0-9]{10,}$" value="" /> Comments:<textarea required pattern="^[a-zA-Z0-9]{15,}$"></textarea> Enter Numbers As Shown: <input type="text" id="txtCaptcha" style="background-image:url(images/cap.JPG); text-align:center; border:none; font-weight: bold; font-family:Modern" /> <input type="button" id="btnrefresh" value="Refresh" onclick="DrawCaptcha();" /> <input type="text" oninput="check(this)" required id="txtInput"/> <input type="submit" value="SEND" onclick="ValidCaptcha();" /> </form> <script> // Validate the Entered input aganist the generated security code function function check(input) { var cap =removeSpaces(document.getElementById('txtCaptcha').value); if (input.value != cap ) { input.setCustomValidity("Error in code Please Check!"); } else { // input is fine -- reset the error message input.setCustomValidity(''); } } </script> </body> </html> Demo: (click to view image larger) It is working or not Please Let me know.. Please Leave your Comment..
Menu
