入力キーでダイアログを検証して閉じる

Question

フォームとのjqueryダイアログがあります。ユーザーが送信ボタンをクリックしたときに正常に動作します。それは検証し、dbに新しいレコードを入力し、親ウィンドウ内のテーブルを閉じて更新します。 Enterキーを押すと、ダイアログが閉じない限り、すべてが同じように動作します。私は誰かが私の間違いを断ち切ることを望んでいる。私はまた、検証プラグインとDatatablesプラグインを使用しています。フォームでEnterキーを押したときのおかげ

<div id="add-dialog-container" title="Add New Manufacturer" style="display:none;"> 
    <div class="validateTips">All form fields are required.</div> 
    <form id="add-dialogForm" class="dialogForms"> 
    <input type="hidden" id="crud" name="crud" value="c" /> 
    <fieldset> 
    <label for="Manufacturer" class="requiredBold">*Manufacturer:</label> 
    <input type="text" name="Manufacturer" id="Manufacturer" class="text ui-widget-content ui-corner-all" /> 
    <label for="Active" class="requiredBold">*Active:</label> 
    <input name="Active" class="radio" type="radio" id="ActiveYes" value="1" checked="checked" /> 
    Yes&nbsp;&nbsp; 
    <input name="Active" class="radio" type="radio" id="ActiveNo" value="0" /> No 
    </fieldset> 
    </form> 
    </div> 

    $(function() { 
    var $this = $("#add-dialogForm"); 
    var originalContent; 
    $("#add-dialog-container").dialog({ 
     autoOpen: false, 
     height: 220, 
     width: 300, 
     modal: true, 
     buttons: { 
      "Save": function() { 
       if($this.valid()) { 
        $this.submit(); 
        $(this).dialog("close"); 
       } 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
      } 
     }, 
     open : function(event, ui) { 
      originalContent = $this.html(); 
     }, 
     close: function() { 
      $this.find(":input,:radio,:checkbox").removeClass("ui-state-error"); 
      $this.html(originalContent); 
     } 
    }); 

    // *** validate and post add new record *** // 
    $("#add-dialogForm").validate({ 
     rules: { 
      Manufacturer: {required: true, minlength: 1, maxlength: 100}, 
      Active: {required: true}, 
      }, 
     messages: { 
      Manufacturer: "*Manufacturer is required", 
      Active: "*Active is required", 
      }, 
     submitHandler: function(form) { 
      var dataToSend = $(form).serialize(); 
      jQuery(form).ajaxSubmit({ 
       type: "post", 
       url: crudURL, 
       data: dataToSend, 
       success: function(){ 
        oTable.fnReloadAjax(); 
       } 
      }) 
     } 
    }); // *** end validate add *** // 

    $("#add-new").click(function() { 
      $("#add-dialog-container").dialog("open"); 
      $("#add-dialog-container").removeAttr("display"); 
      $("#Manufacturer").focus(); 
    }); 
}); 

Answer 1

は、それがフォームを送信します。したがって、$ .validateのsubmitHandlerがトリガーされます。あなたができることはあなたの呼び出しを再編成して、成功した送信後にダイアログを閉じることです。あなたの「保存」ボタンのハンドラではちょうどこの操作を行います。

$this.submit(); 

あなたがフォームを送信すると、自動的にそれをトリガーするためのフォームは、$this.valid()で有効であるかどうかを手動でチェックする必要はありません。その後

、あなたのsubmitHandler機能では、最後に、追加します。

$("#add-dialog-container").dialog('close'); 

「と入力しますヒット」の場合と「クリック保存」の場合の両方をカバーします。

Answer 2

$（この）.remove（）を追加し、あなたの近くに関数内

close: function() { 
    $this.find(":input,:radio,:checkbox").removeClass("ui-state-error"); 
    $this.html(originalContent); 
    $(this).remove(); 
}