Validate Jeditable field

Question

I'm using Jeditable (posting to CakePHP) for input on my page. I want users to only fill in numbers in the Jeditable fields, so my idea was to also use the jQuery validation plugin to validate if only numbers are used, I already use this in other parts of my site.

Jeditable dynamically creates a form with an input when you click on the div, so there seems to be nothing for Jquery validate to bind to and it doesn't seem to work as normal.

I'm able to set the class name of the form through Jeditable (it only has a class atrribute), the created input only has a name attribute which defaults to "name".

My questions:

• Is this a good way to require only numbers?
• If so, how to make it work with Jquery validate
• If not, what would be a better solution?

Thanks in advance, and I look forward to any answers I might get ;)

Irrationality

Answer 1

You can use jQuery validation plugin directly in jeditable to validate the fields of your form

$('.edit').editable(your_url, {
    onsubmit: function(settings, td) {
        var input = $(td).find('input');
        $(this).validate({
            rules: {
                'nameofinput': {
                    number: true
                }
            },
            messages: {
                'actionItemEntity.name': {
                    number: 'Only numbers are allowed'

                }

            }
        });

        return ($(this).valid());
    }
});

Borchert

Answer 2

this code worked for me

function isNumeric(value) {
  if (value == null || !value.toString().match(/^[-]?\d*\.?\d*$/)) return false;
  return true;
}

$('.edit').editable(your_url, {
    onsubmit: function(settings, td) {
      var input = $(td).find('input');
        var original = input.val();
        if (isNumeric(original)) {
            console.log("Validation correct");
            return true;
        } else {
            console.log("Validation failed. Ignoring");
            input.css('background-color','#c00').css('color','#fff');
            return false;
        }
    }
});

Flamsteed

Oooh. Using console.log like – Malaspina

the $(td).find('input'); is it needed for table data only? – Whitebook

Answer 3

You can use the onsubmit event in Jeditable and check if the input has only numbers. This is just an example, I didn't try it:

function isNumeric(value) {
  if (value == null || !value.toString().match(/^[-]?\d*\.?\d*$/)) return false;
  return true;
}

$('.edit').editable(your_url, {
    onsubmit: function(settings, original) {
        if (isNumeric(original)) {
            return true;
        } else {
            //display your message
            return false;
        }
    }
});

Tradition

Thanks, I didn't have time to really test it, in my first tries it didn't work (always returned false) but as said, I didn't have really time to try it out properly, many thanks for your answer nevertheless! :) – Irrationality

It seems that Jeditable submits if you return false anyway: markmail.org/message/cgagaclwtk6bt4yv The code change mentioned in the URL is not available anymore :( I hope someone can help me to get this working! – Irrationality

Answer 4

There is a code, maybe it can help you :D
http://www.codeproject.com/Articles/50059/jQuery-Validate-and-Jeditable-Part-2/

Certainly

Answer 5

For my project I've changed the function name to isAcceptable because I allow brackets, dashes, dots to be part of the phone number.

function isAcceptable(value) {
  if (value == null || !value.toString().match(/^[-+]?\d*\.?[\d\s().-]+$/)) return false;
  return true;
}

Lemus

Answer 6

Open jquery.editable.js and find: onedit function

/* setup some functions */
        var onedit   = settings.onedit   || function() { }; 

and do some like:

$('.edit').editable(your_url, {
    onedit:function(){
            alert("original value"+$(this).text());
   },
});

Throb