jQuery UI 模态表單瘋狂踩坑官網的例子From表單DIV的位置實際有2個送出的按鈕表單無法送出請求的表單内容為空優化-調整模态框大小優化-直接隐藏模态框修改後的版本

想套用一下前端的元件寫一個表單驗證的頁面，于是試了一下jquery ui

首先把官網的例子貼上：

試了一下，一切都很美好。

首先看到css寫的很粗，比如第一條：

直接就定義了所有label和input标簽的樣式。看着body裡是2個div，于是想把2個div外面再包一層div，像下面這樣：

然後所有的css樣式前面都加上自己的這個div，就不會和别的樣式沖突了，比如這樣：

問題：修改後，模态框裡的css樣式都沒有應用上。比如lable和input沒有變成塊級标簽，導緻沒有換行

原因：這裡 id="dialog-form" 這個div的位置變了，跑到了 id="myui" 這個div的外面了。造成這個情況的原因是，jquery ui就是這麼做的，把 id="dialog-form" 這個div挖出來，出來好之後append到一個位置，而預設位置是 body 标簽。

解決方法：知道原因後，修改css的寫法也是可以實作的。但是也是有方法按照原來想的那樣，讓 id="dialog-form" 這個div仍然放在 id="myui" 裡面的。在dialog裡加上一個 appendto 參數，指定模态框要添加的位置，之前沒有指定就是預設（body）：

在送出表單之前，先要知道，實際這個例子中有2個按鈕可以用來送出的。其中一個隐藏了。

寫在form裡的submit按鈕：

實際位置應該是跑到螢幕外面去了。這裡把style屬性去掉就能看到了。這個按鈕的作用是友善我們用鍵盤的Enter鍵操作的。

另外jquery ui幫我們生成的按鈕是在 <code>dialog = $( "#dialog-form" ).dialog()</code> 裡用buttons屬性生成的，這裡可以自定義以及添加更多的按鈕：

另外這裡的确認按鈕不是submit，而是觸發一個adduser進行表單驗證的方法。adduser裡驗證通過後會生成前端的标簽，在前端添加一行資料，但是submit送出。

示範的代碼是一個純前端的實作，如果要送出到後端，那麼就是在form标簽裡加上action屬性。然後先把submit按鈕的style屬性去掉，用submit先送出。

問題：後端收不到發來的請求

原因：前端阻止了submit事件的預設操作，具體就是下面這句

解決方法：這裡直接把阻止的代碼注釋掉就好了

現在可以使用Enter鍵進行submit送出了，但是确認按鈕并不能送出

問題2：确認按鈕不是submit

原因：這個按鈕綁定的是adduser，而adduser裡也沒有submit送出

解決方法：把确認按鈕的click綁定為觸發form的submit事件，這樣這個确認按鈕的效果就和submit一樣了，而且submit裡也是要先執行adduser()進行驗證的。把 <code>dialog = $( "#dialog-form" ).dialog()</code> 裡用buttons屬性改成了下面這樣，這個buttons的參數是可支援 object 和 array 兩種形式，這裡我改用了array的形式：

現在後端可以收到請求了，但是收到的都是沒有值的空的請求。

問題：後端内收到請求，但是請求的值都是空值

原因：前端在發送submit請求前，清空了表單的内容。在 <code>dialog = $( "#dialog-form" ).dialog()</code> 裡最後有一個close屬性，值是一個方法：

close屬性是在對話框關閉的時候要執行的内容，這裡面清空了form表單的内容。

具體步驟是，submit事件會首先觸發adduser()進行表單驗證。adduser()裡面會先用 checklength() 驗證長度，然後用 checkregexp() 進行正則的驗證。如果驗證失敗會傳回false組織之後事件的發生。如果驗證通過則會先執行關閉模态框的操作：

這裡就要關閉模态框了，然後傳回true，之後才是執行submit送出的動作。但是關閉模态框的時候，資料就清空了。服務的收到的就是被清空後的空表單發來的請求，并且是在通過了前端的資料驗證之後的。

解決方法：應該可以先不關閉模态框，等submit送出之後再關閉。不過實作起來也不友善。表單清空的功能還是有用的，但是隻要在下次打開前清空就好了。這裡可以用一個open方法替代原來的close方法。

另外一個坑：官網的頁面裡是有一個create方法的，本來想用這個的。但是發現沒有用，然後去源碼裡找了一下(jquery-ui.js)：

上面的callbacks應該就是所有的方法了，并沒有create。然後才試的open。

還是這個生成模态框的函數 <code>dialog = $( "#dialog-form" ).dialog()</code> ，裡面的 height 和 width 屬性，可以設定模态框的預設大小

問題：這裡模态框有可能會出現滾輪

原因：模态框 id="dialog-form" 這個div裡有這個樣式 overflow: auto ，是以溢出會出現滾動條。

解決方法：把overflow樣式覆寫掉應該就可以了，不過根本問題是溢出。我這裡造成溢出的标簽是form裡的input标簽。樣式是這樣的：

這裡我調整了 width 的寬度就好了。

例子中沒有這個情況，但是我用的時候頁面加載的時候會首先顯示出模态框，等加載完畢後模态框會隐藏掉。

問題：加載頁面的時候會有一瞬出現模态框

原因：因為我把js代碼的位置放到的最後，是以模态框的标簽的代碼讀完的時候會顯示出來，等js代碼讀取完的時候才會隐藏

解決方法：應該把生成模态框的js主要是 <code>dialog = $( "#dialog-form" ).dialog()</code> 方法提到前面就好了。不過我用了另外一個方法，給我的模态框的div标簽加上了這個類：

jquery-ui.css 裡，這個類是這樣的：

就是簡單的隐藏掉，試過之後依然可以顯示出來。

替換掉了模闆語言的部分，我用的修改後的版本如下：