Question

我已经设置了一个包含一堆contenteditbale div的页面，以及一些js / ajax功能，以便用户可以内联编辑。

<div class="inlineEdit" contenteditable="true"></div>

JS是这样的：

$(document).ready(function(){
$('div.inline-edit').blur(function()
{

    var pathArray = window.location.pathname.split( '/' );
    var segment_3 = pathArray[3];
    var editableObj = $(this);
    var token_input = $('input.token');
    var save_data ={};
    var token_name = token_input.attr('name');

    save_data['field'] = editableObj.attr('id');
    save_data['id'] = editableObj.closest('.inline-id').attr('id');
    save_data['editedValue'] = editableObj.text();

    $.ajax({
        url: segment_3+'/update',
        type: 'POST',
        data:save_data,
        success: function(){
        //on success functionality

        }        
   });
});

}）;

这一部分都完美无缺，所有正确的字段都会使用正确的信息进行更新。我只需要一些方法来验证信息，然后才能进入ajax

我知道JQuery Validation但是我很确定它不适用于div。

有解决方案，还是我不得不改变div？

Answer 1

您可以创建一个临时输入框并通过它传递值以检查有效性。我写了一个函数来使用HTML5验证来检查有效性。

  function validityChecker(value, type) {
      type = type?type:'text'
      $('body').append('<input id="checkValidity" type="'+type+'" style="display:none;">');
      $('#checkValidity').val(value)
      validity = $('#checkValidity').val()?$('#checkValidity').val().length>0:false && $('#checkValidity')[0].checkValidity()
      $('#checkValidity').remove();
      return validity;
  }

在你的情况下使用这样：

if(validityChecker(save_data['editedValue'], 'number')){ // if you want to check for number
    $.ajax({
        url: segment_3+'/update',
        type: 'POST',
        data:save_data,
        success: function(){
        //on success functionality
        }        
    })
}

<强>演示：

＆＃13;

function validityChecker(value, type) {
  type = type?type:'text'
  $('body').append('<input id="checkValidity" type="'+type+'" style="display:none;">');
  $('#checkValidity').val(value)
  validity = $('#checkValidity').val()?$('#checkValidity').val().length>0:false && $('#checkValidity')[0].checkValidity()
  $('#checkValidity').remove();
  return validity;
}

save_data = 'This is not a number';
alert(validityChecker(save_data, 'number')) // false
alert(validityChecker(save_data, 'text')) // true

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

div的jquery验证

1 个答案: