Permalink
Browse files

Adding very basic captcha feature

  • Loading branch information...
1 parent d3698a9 commit e99c437b23a33cd9288cb068a00d2beb7927c687 @rickycheers committed Feb 8, 2012
Showing with 85 additions and 35 deletions.
  1. +82 −34 formvalidator.js
  2. +3 −1 index.html
View
@@ -8,7 +8,7 @@ var FormValidator = (function(jQuery){
* @param form_id String
* @param callback Function
*/
- var self = FormValidator = function(form_id, success_callback, error_callback) {
+ var self = FormValidator = function(form_id, success_callback, error_callback, use_captcha) {
if (!form_id || form_id.match('#').length === 0){
throw Error("Sorry, I need a valid ID like: \"#someId\" and you gave me: " + form_id);
}
@@ -48,39 +48,14 @@ var FormValidator = (function(jQuery){
validateForm.call(self);
if (self.isValidForm) {
- var data = {};
- var successCallback = typeof success_callback === 'function' ? success_callback : function(response){ console.log(response); };
- var errorCallback = typeof error_callback === 'function' ? error_callback : function(response){ console.log(response); };
-
- //text fields
- form.find('input[type=text], input[type=email], input[type=number], input[type=phone], input[type=hidden], textarea').each(function(){
- data[$(this).attr('name')] = $(this).val();
- });
-
- //radio buttons
- form.find('input[type=radio]:checked').each(function(){
- data[$(this).attr('name')] = $(this).val();
- });
-
- //checkboxes
- form.find('input[type=checkbox]').each(function(){
- if($(this).is(':checked')){
- data[$(this).attr('name')] = 'on'; //on
- } else {
- data[$(this).attr('name')] = ''; //off
- }
- });
-
- /** TODO Implement for selects */
-
- $.ajax({
- url: form.attr('action'),
- type: form.attr('method'),
- data: data,
- success: successCallback,
- error: errorCallback
- });
-
+ if(use_captcha){
+ showCaptcha();
+ $(document).bind('validcaptcha', function(){
+ doAjax.call(this, form, success_callback, error_callback);
+ });
+ } else {
+ doAjax.call(this, form, success_callback, error_callback);
+ }
}
});
@@ -281,6 +256,79 @@ var FormValidator = (function(jQuery){
}
return messages[key];
}
+
+ function doAjax(form, success_callback, error_callback){
+ var data = {};
+ var successCallback = typeof success_callback === 'function' ? success_callback : function(response){ console.log('success'); };
+ var errorCallback = typeof error_callback === 'function' ? error_callback : function(response){ console.log('error'); };
+
+ //text fields
+ form.find('input[type=text], input[type=email], input[type=number], input[type=phone], input[type=hidden], textarea').each(function(){
+ data[$(this).attr('name')] = $(this).val();
+ });
+
+ //radio buttons
+ form.find('input[type=radio]:checked').each(function(){
+ data[$(this).attr('name')] = $(this).val();
+ });
+
+ //checkboxes
+ form.find('input[type=checkbox]').each(function(){
+ if($(this).is(':checked')){
+ data[$(this).attr('name')] = 'on'; //on
+ } else {
+ data[$(this).attr('name')] = ''; //off
+ }
+ });
+
+ /** TODO Implement for selects */
+ $.ajax({
+ url: form.attr('action'),
+ type: form.attr('method'),
+ data: data,
+ success: successCallback,
+ error: errorCallback
+ });
+ }
+
+ function showCaptcha(){
+
+ var dialog_html =
+ '<div id="captcha">' +
+ '<span id="captcha_value"></span>' +
+ '<input id="cvh" type="hidden" name="cvh" />' +
+ '<input id="captcha_value_value" type="text" name="captcha_value_value" />' +
+ '</div>';
+
+ $('body').append(dialog_html);
+
+ $('#captcha').dialog({
+ autoOpen: false,
+ title: "Just to verify you are human.",
+ width: "360px",
+ height: "250px",
+ buttons:{
+ 'Ok': function(){
+ if( $('#cvh').val() === $('#captcha_value_value').val() ){
+ $('#captcha').dialog('close');
+ $(document).trigger('validcaptcha');
+ } else {
+ alert("The validation code does not match.\n Please try again.");
+ generateCaptchcaValue();
+ }
+ }
+ }
+ });
+
+ generateCaptchcaValue();
+ $('#captcha').dialog('open');
+ }
+
+ function generateCaptchcaValue(){
+ var randomnumber = Math.floor(Math.random() * 10000);
+ $('#cvh').val(randomnumber);
+ $('#captcha_value').html(randomnumber);
+ }
//self.prototype.doSomething = function() {};
return FormValidator;
View
@@ -4,7 +4,9 @@
<title>Form Validator Plugin</title>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src=" https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="formvalidator.js" type="text/javascript" charset="utf-8"></script>
+
<!-- <script src="formvalidator-min.js" type="text/javascript" charset="utf-8" async defer></script> -->
</head>
<body>
@@ -37,7 +39,7 @@
}
//Change the Id to your form Id
- var form = new FormValidator('#myForm', showGreetings);
+ var form = new FormValidator('#myForm', showGreetings, showGreetings, true);
});
</script>
</body>

0 comments on commit e99c437

Please sign in to comment.