CODEWITHSUNDEEP
javascriptphpvalidationxhtmlcaptcha
user3076157
user3076157

Reputation: 25

Trying to get Captcha working alongside my validation

I have managed to validate my textboxes using JS but know I need to allow the captcha to work alongside the validation.

  <script>
  function validateForm() {
  var x = document.forms["reg"]["User"].value;
  var letters = "@";
  if (x.match(letters))
   { 
     alert("Can't Have Email Address As USERNAME!");
       return false;
      }

       return true;


    }

First Form

        <form name="reg" action="DBLogin.php" onsubmit="return validateForm()" method="post">

Captcha:

    <form action="validate.php" method="post">
      Enter Image Text
       <input name="captcha" type="text">
        <img src="captcha.php" /><br>
      <input name="submit" type="submit" value="Register">
      </form>

Is there a way of having the captcha work alongside my JS validation?

Thank you

Upvotes: 2

Views: 424

Answers (1)

Nithin
Nithin

Reputation: 5840

use ajax to validate the captcha. and when he submits the form send an ajax request to verify captcha.

give a submit button only to the captcha form.

<form id ="captcha-form" >
      Enter Image Text
       <input name="captcha" type="text">
        <img src="captcha.php" /><br>
      <input name="submit" type="submit" value="Register">
</form>

main form :

<form id="main-form" name="reg" action="DBLogin.php" method="post">
  <!-- this shoulnt have an submit button -->

now use a js code to first verify the captcha and validate form 

$("#captcha-form").submit(function(event){
    
    // setup some local variables
    var $form = $(this);
    // let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");
    // serialize the data in the form
    var serializedData = $form.serialize();

    // let's disable the inputs for the duration of the ajax request
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    $inputs.prop("disabled", true);

    // fire off the request to /form.php
    request = $.ajax({
        url: "validate.php",
        type: "post",
        data: serializedData
    });

    // callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        if(response == "true")
          {
            validateform();
          }
    });

    // callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // handle error
        
    });

    // callback handler that will be called regardless
    // if the request failed or succeeded
    request.always(function () {
        // reenable the inputs
        $inputs.prop("disabled", false);
    });

    // prevent default posting of form
    event.preventDefault();
});

now the validate function 

function validateForm() {
  var x = document.forms["reg"]["User"].value;
  var letters = "@";
  if (x.match(letters))
   { 
     alert("Can't Have Email Address As USERNAME!");
       
      }

       $("#main-form").submit();


    }

as RiggsFolly has pointed out this is not recommended. as this would defeat the purpose of captcha.

Upvotes: 2

Related Questions