PHP JQuery and Jeditable

Question

Just a quick question regarding this issue i am having. I am using jeditable to edit in place some fields on a page. This is working perfectly. Now I wish to implement some data checking. I have my php code to check the data entered and if its correct, it updates that database, and if it isn't it will return the error. The issue I am having is I want it to spit out the error to tell them but when they click the field again to edit it, it shows the error in the field until a page refresh. What i want it to do is have the same data in the field when they click on it after the error occurs instead of having to refresh the page then click the field again to edit it. Perhaps there is a way to return back the error and pass that into a tooltip of some sort above the field? Of course the way jeditable works is the div is surrounding the field then i have some js calling on my update.php file, this parses what jeditable passes to it and returns a $value to be error checked and by default if it is fine it simply at the bottom of the php "return $value;" to be put back int he field after its been saved in the DB.

Hopefully someone can understand what I am asking here and any assistance would be appreciated.

Answer 1

Easiest way is probably to do some client side validation. Right now you are doing server side validation by checking in PHP when the form is submitted. What are you checking for?Without code it is hard to give you a good example of client side validation.

Basic field checking:

var check_field = $("#field").val();
if (!check_field) { alert("Error message"); } else 
{ 
   // submit POST or whatever 
}

Edit

Since the MAC address validation algorithm is already written server side, I recommend a separate ajax POST request that calls the checker function. Take the result of that request (true, false) and check it client side. If true, proceed with the update call.

Example:

$("#form").submit(function() {
var mac = $("#macfield").val();
if (!mac) { alert("MAC address can't be empty!"); } else 
{ 
   $.POST("checkmacaddress.php", {macval: mac}).success(function(a){
       //assuming a comes back as a bool
       if (!a) { alert("Invalid MAC!"); } else
       {
          // if the checker returned true, update the record
          $.POST("update.php" ...);
       }
   });
} });

This doesn't include the checkmacaddress.php but you should be able to handle that if you already have the function on hand.

Answer 2

Hate when I do this, post here then figure out the answer myself...but at least if someone has the same issue they will see it. I found out about the jeditable onsubmit functions...i am using a tooltip to show on hover when editing the field so this will set the tooltip to the error and not submit the data unless its a valid mac.

    function isMAC(value) {
            teststr = value;
            regex=/^([0-9a-f]{2}([:-]|$)){6}$|([0-9a-f]{4}([.]|$)){3}$/i;
            if (regex.test(teststr)){
                    return true;
            }
            else {
                    return false;
            }
    }

    $(".edit_mac").editable("edit_mac.php", {
            onsubmit: function(settings, data) {
                    var input = $(data).find('input');
                    var value = input.val();
                if (isMAC(value)) {
                            return true;
                } else {
                            //display your message
                            $("#tooltip").html("Bad MAC Address...");
                            return false;
                    }
            },
          indicator : "Saving...",
          submitdata: { _method: "put" },
          submit : 'Save',
          cssclass : "editable",
          type : "text"
    });