How can I use x-editable and jquery validation plugin

Question

How can i validate information using jquery validation plugin when using XEDITABLE for edit-in-place?

This is my current non-validated x-editable field

This is what i pretend

Answer 1

I use valib.js instead of stone jquery validation

HTML:

<p>X-editable Bootstrap popup</p>
<div style="margin: 150px">
    <a href="#" id="email">awesome</a>
</div>

JS:

$('#email').editable({
    type: 'text',
    url: '/post',    
    pk: 1,    
    placement: 'top',
    title: 'Enter email' ,
    validate:function(value){

       var v=valib.String.isEmailLike(value)         
       if(v==false) return 'Please insert valid mail';
    }   
});

DEMO

Answer 2

Currently the use of jQuery Validation Plugin is not supported by X-editable.

jQuery Validation Plugin has two requirements that doesn't play well with most implementations of X-editable:

1. It requires the validated element to be a child of a <form> element (source). In theory, we could have workaround this by nesting the x-editable fields inside a <form></form> element, but:
2. The validated elements must be form elements (<input>, <textarea>, <select>, etc...) (source)

So basically, here are your options:

1. Use the HTML5 input types feature by setting the field attribute data-type='email' (see demo here) The output will be slightly different from what you expected it to be, according to your screenshot. Therefore you should probably use one of the following methods, which is:
2. Use another external validation library, like @dm4web suggested.
3. Ultimately you can also create your own validation function if your prefer, see demo here

Answer 3

Based on answer above but an attempt to use jquery validation. From

HTML

<input type="email" name="email" id="email" required>

SCRIPT

$('#email').editable({
    type: 'text',
    url: '/post',    
    pk: 1,    
    placement: 'top',
    title: 'Enter email' ,
    validate: function(value){
       var flag = $("#email-input").validate();
       if (!flag) {
          return 'Please insert valid mail';
       }   
});

Answer 4

It support have data-type='email' as well.

HTML5 input types. Following types are supported:

password, email, url, tel, number, range, time

<a href="#" id="email" data-type="email" data-
pk="1">[email protected]</a>
<script>
 $(function(){
  $('#email').editable({
    url: '/post',
    title: 'Enter email'
    });
  });
</script>