validate form without refreshing page and showing error through validationEngine

Question

I'm using in the same page a validation engine with date picker.

• Datepicker: http://jqueryui.com/demos/datepicker/

• Validationengine: http://www.position-relative.net/creation/formValidator/demos/demoValidators.html

I've added a jQuery.noConflict(); to make it work (at the beginning of the code).

Now, I need to make my insert through a PHP file, but without refreshing the page, and by displaying an error message in the same bubble of validationEngine (for example when the email is already registered in the BDD).

1. should I import jQuery to make my insert in the same page without causing conflicts, or can I use one on the query already used for the same purpose?

2. How do I display a server response through the validationEngine?

My code is the following one.

$(".btn_newsletter").live('click', function() { 
  $.ajax(
    {
      url: "php/functions/signin.php"+nomfichier,
      success: function(data) { 
        if (data.check==0) {alert('Error : Sorry '); return false;}
        if (data.check==1) {alert('yep!!!');                                                                            
      }
    },
    cache: false,
    type: "POST",
    dataType: 'json'
  });
}

This is my PHP code.

  $ip= $_SERVER["REMOTE_ADDR"];
  $select = "select * from av_newsletter where email='".$_POST['email']."'";
  $exist = $_BASE->query_array($select);
  if ($exist) { 
    $check = "0";
  }
  else {
    $ajout="INSERT INTO av_newsletter(id,sub_date,email,ip) VALUES (NULL,now(),'$email','$ip')";
    $add=$_BASE->query($ajout);
    if ($add) { 
      $check="1";  
    }
  }

  $return_arr["check"] = $check;
  echo json_encode($return_arr);

It doesn't work; I've no alert, but also no errors.

Answer 1

it works :)

    $(".btn_newsletter").live('click',function() {
              var data ="email="+$('#email').val();

  $.ajax({                           
    url: "php/functions/signin.php"+"?"+data,
    success: function(data) {   
          if(data.check=='1'){  alert('yep!!!'); }                                                                    
          if(data.check=='0'){  alert('Error : Sorry '); return false; }
    },
    cache: false,
    type: "POST",
    dataType: 'json'
  });
});

and in my signin.php I catch the value of the input like this $email=$_REQUEST['email'] Thanks a lot! time for me to see about validation engine how to link this with :)

Answer 2

Ok, before we spam the comments and get to far off topic, please execute this code which should get you started in getting it to work eventually.

$(".btn_newsletter").live('click',function() {
  alert('clicked'); // click is executed
  $.ajax({                           
    url: "php/functions/signin.php"+nomfichier,
    success: function(data) {
      alert(data); // should alert the data
      if(data.check==0){  alert('Error : Sorry '); return false; }
      if(data.check==1){  alert('yep!!!'); }                                                                    
    },
    error: function(request, status, error) {
      alert('failed '+status);
    },
    cache: false,
    type: "POST",
    dataType: 'json'
  });
});

Answer 3

If you are not tied in too deeply to your 'Validationengine' I would recommend using this one, is has served me well for years, it has support for making remote checks so you could do something like this:

$(document).ready(function(){

var save_options = {
    success:        userSaved, //callback function
    url:           '/users/save',
    response:      'json',
    method:        'post'
};

var validationObj = {
    rules: {
        name: "required",
        email: {
        email: true,
            required: true,
            remote: "/user/check_email/"
        }
    },
    messages: {
        name: "Please name yourself",
        email: {
            required: "Please enter your email address",
            email: "Invalid email address",
            remote: "Email already in use."
        }
    },
    errorPlacement:function(error, element) {
        error.appendTo( element.next() );
    },
    submitHandler:  function(form) {
        $(form).ajaxSubmit(save_options);
    },
    success:function(label) {
        label.html(" ").addClass("checked");
    }
};

});

And then on the PHP side at the '/users/check_email' endpoint the PHP does the following:

echo $emailExists ? json_encode(false) : json_encode(true);