<td contenteditable = "true">要素に対する単純な検証。

Question

私はMYSQLのデータからなるテーブルを持っています。テーブルの要素を変更するたびに、データベースはajaxによって更新されます。 これは編集可能な行にデータを送信するためのJavaScriptコードです。

 function saveToDatabase(editableObj,column,id) {  
     $(editableObj).css("background","#FFF url(images/loaderIcon.gif) no-repeat right"); 
     $("#tabs-1").load(location.href + " #tabs-1"); 
      $.ajax({ 
       url: "saveedit.php", 
       type: "POST", 
       data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id, 
       success: function(data){ 
        $(editableObj).css("background","#FDFDFD"); 
       } 
      });    
    } 

上記の機能の後、saveedit.phpはデータベースの更新を処理し、機能します。

次に、これはhtmlのmy tableです。これらの表要素は編集可能です。

 <?php 
      $result = FUNCTION_TO_RETRIEVE_DATA_FROM_DB; 
      foreach($result as $k=>$v){ 
     ?> 
     <tr> 
      <td><?php echo $k+1; ?></td> 
      <td contenteditable="true" onBlur="saveToDatabase(this, 'memberID', '<?php echo $result[$k]["memberID"]; ?>')"><?php echo $result[$k]["memberID"]; ?></td> 

      <td contenteditable="true" onBlur="saveToDatabase(this, 'surname', '<?php echo $result[$k]["memberID"]; ?>')"><?php echo $result[$k]["surname"]; ?></td> 

      <td contenteditable="true" onBlur="saveToDatabase(this, 'forename', '<?php echo $result[$k]["memberID"]; ?>')"><?php echo $result[$k]["forename"]; ?></td> 

      <td contenteditable="true" onBlur="saveToDatabase(this, 'address', '<?php echo $result[$k]["memberID"]; ?>')"><?php echo $result[$k]["address"]; ?></td> 

      <td contenteditable="true" onBlur="saveToDatabase(this, 'gradeID', '<?php echo $result[$k]["memberID"]; ?>')"><?php echo $result[$k]["gradeID"]; ?></td>         
     </tr> 
     <?php 
      } 
     ?> 

このコードは動作していますが、私はお願いしたい質問がある、どのように私は、この要素にユーザーが入力したデータを検証することができますか？たとえば、最初の列memberIDを確認したい場合は、6文字を超えることはできません。また、必須であるかどうかを確認することもできます。私がしようとしているのは、入力されたデータをAJAXを使用して送信する前に検証することですが、今ではテーブル要素でどのように検証が行われるかわかりません。あなたの条件が満たされたとき

var newVal = editableObj.innerHTML; 
// Your validation on newVal, if validation successful call the saveToDatabase() function 
// Otherwise show an error message and do nothing 

Answer 1

ajaxを呼び出す前に、条件を前に置くことで列を検証してください。

` function saveToDatabase(editableObj,column,id) { 
    $(editableObj).css("background","#FFF url(images/loaderIcon.gif) no-repeat right"); 
     $("#tabs-1").load(location.href + " #tabs-1"); 
      if(column == "memberID"){ 
       if(editableObj.innerHTML.length > 6) { 
         alert("cannot be longer than 6 characters"); 
         return false; 
       }else{ 
         $.ajax({ 
         url: "saveedit.php", 
         type: "POST", 
         data:'column='+column+'&editval='+editableObj.innerHTML+'&id='+id, 
         success: function(data){ 
         $(editableObj).css("background","#FDFDFD"); 
         } 
        }); 
        } 
       }    
    }` 

Answer 2

は次のように入力した値に必要な検証を置きます。

function saveToDatabase(editableObj,column,id) { 
//If(editableObj.length > 6) // Case of string Check your other condition. 
if(editableObj.toString().length > 6) // in case it is not string. 
{ 
alert(Condition fail); 
} 
else 
{ 
// Your ajax call ------- 
} 

} 

または：

saveToDatabase関数を呼び出す前に、あなたの通過データを確認してください。

Answer 3

が通過パラメータのみプロセスAJAXを確認してください：saveToDatabase()関数を呼び出す前に