重複したエントリを許可しないように入力フィールドに検証を追加する

Question

今、追加ボタンをクリックすると、ダイアログボックスが表示されます。ダイアログボックス内の送信ボタンが押されるたびに、それはデータベースに挿入されます。 MR_IDとSupp_IDの2つのフィールドがあります。 Supp_IDは整数のみを受け入れます。 Supp_IDにさらに検証を追加して、入力された値が重複していて、すでにデータベースに入っている場合は、送信または挿入しないようにしたいと思います。これどうやってするの？

JavaScriptを：私のダイアログボックスの

$(function() { 


    $("#insertButton").on('click', function(e){ 
    e.preventDefault(); 
    }); 

    var dialog, form, 

     mr_id_dialog = $("#mr_id_dialog"), 
     supplier_id = $("#supplier_id"), 
     allFields = $([]).add(mr_id_dialog).add(supplier_id), 
     tips = $(".validateTips"); 
    console.log(allFields); 

    function updateTips(t) { 
     tips 
     .text(t) 
     .addClass("ui-state-highlight"); 
     setTimeout(function() { 
     tips.removeClass("ui-state-highlight", 1500); 
     }, 500); 
    } 

    function checkRegexp(o, regexp, n) { 
     if (!(regexp.test(o.val()))) { 
     o.addClass("ui-state-error"); 
     updateTips(n); 
     return false; 
     } else { 
     return true; 
     } 
    } 

    function addVendor() { 
     var valid = true; 
     allFields.removeClass("ui-state-error"); 
// ----- Validation for each input in add row dialog box ----- 
     valid = valid && checkRegexp(supplier_id, /^(0|[1-9][0-9]*)$/, "Please enter a valid Supplier ID"); 
     console.log(allFields); 
     if (valid) { 
     var $tr = $("#index_table tbody tr").eq(0).clone(); 
     var dict = {}; 
     var errors = ""; 
     $.each(allFields, function(){ 
      $tr.find('.' + $(this).attr('id')).html($(this).val()+"-"+supplier_id); 
      var type = $(this).attr('id'); 
      var value = $(this).val(); 
      console.log(type + " : " + value); 
      // ----- Switch statement that provides validation for each table cell ----- 
      switch (type) { 
      case "mr_id_dialog": 
       dict["MR_ID"] = parseInt(value); 
       console.log(dict['MR_ID']); 
       break; 
      case "supplier_id": 
       dict["Supp_ID"] = value; 
       break; 
      } 
     }); 
     $("#index_table tbody").append($tr); 
     dialog.dialog("close"); 
     console.log(dict); 

     var request = $.ajax({ 
      type: "POST", 
      url: "insert.php", 
      data: dict 
     }); 

     request.done(function (response, textStatus, jqXHR){ 
      if(JSON.parse(response) == true){ 
      console.log("row inserted"); 
      } else { 
      console.log("row failed to insert"); 
      console.log(response); 
      } 
     }); 

     // Callback handler that will be called on failure 
     request.fail(function (jqXHR, textStatus, errorThrown){ 
      console.error(
       "The following error occurred: "+ 
       textStatus, errorThrown 
      ); 
     }); 

     // Callback handler that will be called regardless 
     // if the request failed or succeeded 
     request.always(function() { 

     }); 


     } 
     return valid; 
    } 

    var dialog = $("#dialog-form").dialog({ 
     autoOpen: false, 
     height: 400, 
     width: 350, 
     modal: true, 
     buttons: { 
     "Add Supplier ID": addVendor, 
     Cancel: function() { 
      dialog.dialog("close"); 
     } 
     }, 
     close: function() { 
     form[ 0 ].reset(); 
     allFields.removeClass("ui-state-error"); 
     } 
    }); 

    form = dialog.find("form").on("submit", function(event) { 
     event.preventDefault(); 
     addVendor(); 
    }); 

    $("#insertButton").button().on("click", function() { 
     dialog.dialog({ 
      position: ['center', 'top'], 
      show: 'blind', 
      hide: 'blind' 
     }); 
     dialog.dialog("open"); 
    }); 
}); 

コード：あなたは、ユーザーがその場を離れるとすぐにサーバーへのAJAX呼び出しを送信し、任意のレコードが存在するかどうかをデータベースで確認することができます

<div id="dialog-form" title="Add Supplier ID"> 
    <p class="validateTips">All form fields are required.</p> 

<!-- Dialog box displayed after add row button is clicked --> 
    <form> 
    <fieldset> 
     <label for="mr_id">MR_ID</label> 
     <select name="mr_id" id="mr_id_dialog" class="text ui-widget-content ui-corner-all" value="300"> 
      <?php foreach($user1->fetchAll() as $user2) { ?> 
      <option> 
       <?php echo $user2['MR_ID'];?> 
      </option> 
     <?php } ?> 
     </select><br><br> 
     <label for="supplier_id">Supplier ID</label> 
     <input type="text" name="supp_id" id="supplier_id" class="text ui-widget-content ui-corner-all" value="99"> 

     <!-- Allow form submission with keyboard without duplicating the dialog button --> 
     <input type="submit" id="submit" tabindex="-1" style="position:absolute; top:-1000px"> 
    </fieldset> 
    </form> 
</div> 

Answer 1

同じ値で

はいの場合は、別の値を使用するようにエラーメッセージをスローすることができます。