javascript - Jquery 验证 div

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

演示:

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

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