CODEWITHSUNDEEP
javascriptjqueryvalidationx-editable
Lothre1
Lothre1

Reputation: 3853

How can I use x-editable and jquery validation plugin

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

enter image description here

This is what i pretend

enter image description here

Upvotes: 12

Views: 10168

Answers (4)

moni sogani
moni sogani

Reputation: 278

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>

Upvotes: 0

Lulu
Lulu

Reputation: 470

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

Upvotes: 2

Marcel Djaman
Marcel Djaman

Reputation: 1286

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';
       }   
});

Upvotes: 1

dm4web
dm4web

Reputation: 4652

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

Upvotes: 6

Related Questions