Search code examples
mobilecaptchaspamintel-xdk

Need to use captcha validation for mobile app forms?


I am making a HTML5 mobile app via XDK. I have some forms which I use Captcha validation in the website. In my prospective, comment spam for a mobile app doesn't make any scenes. Does anyone see any comment spam for mobile apps? Do you think I need to use Captcha validation in a mobile app form or leave it to not to bother the users?


Solution

  • The best way to prevent comment spam and spam bots in both websites and hybrid apps is to create the form dynamically by JS or jQuery instead of putting the form in the view (HTML codes) directly. In this way you don't need to put Captcha to protect it from bots. Here is a sample code for creating a form with jQuery:

    // Make THE FORM tag
    var $form = $("<form/>", {
      appendTo : $("#contactFormSection"),
      class    : "col-xs-12 col-sm-11",
      id       : "contactForm",
      submit   : AJAXSubmitForm
    });
    
    //MAKE A HIDDEN INPUT
    $("<input/>",{
      type        : "hidden",
      name        : "flag", // Needed for serialization
      value       : "5",
      appendTo    : $("#nameSection"),
      on          : {        // Yes, the jQuery's on() Method 
        /*
        input : function() {
          console.log( this.value );
        }
        */
      }
    });
    
    //Make Name INPUT
    $("<input/>",{
      type        : "text",
      class       : "formContact", 
      id          : "exampleInputName2",
      name        : "name", // Needed for serialization
      placeholder : "Your Name",
      appendTo    : $("#nameSection"),
      on          : {        // Yes, the jQuery's on() Method 
    
      }
    });
    
    //MAKE EMAIL INPUT
    $("<input/>",{
      type        : "email",
      class       : "formContact", 
      id          : "exampleInputEmail1",
      name        : "email", // Needed for serialization
      placeholder : "Your Email",
      appendTo    : $("#emailSection"),
      on          : {        // Yes, the jQuery's on() Method 
    
      }
    });
    
    //MAKE TEXTAREA 
    $("<textarea/>",{
      class       : "formContact-text", 
      rows        : "3",
      name        : "msg", // Needed for serialization
      placeholder : "Your message",
      appendTo    : $("#msgSection"),
    });
    
    //submit the form
    function AJAXSubmitForm(event) {
      event.preventDefault(); // Prevent Default Form Submission
      // do AJAX instead:
      var serializedData = $(this).serialize();
      $.ajax({
        url: "Your server API URL",
        type: "POST",
        data: serializedData,
        dataType: 'json',
        success: function (data) {
          // log the data sent back from PHP
          if(data.status){
            $('#confirmation').modal('show');
          } else{
            $('#errorMsg').modal('show');
          }
        }
      });
    }