PHP表單提交和AJAX驗證

Question

編輯： document.getElementById('submit').disabled='disabled'; 如果我把它放return false;而不是return false;那就行了 但由於某些原因，它還會在未使用用戶名時禁用該按鈕。

---

以下是檢查用戶名可用性的基本腳本。

如果已經使用了用戶名，我該如何阻止提交表單 ？

理想情況下，我想彈出一個JS警告框。

我試圖將它添加到JS但是沒有用：

document.getElementById('submit').disabled

我也嘗試添加onclick="return validate();" 表單本身，但也沒有運氣：表單仍然可以提交。

HTML

<form id="edit" action="edit.php" method="post">
   <fieldset>       
     <label>Username</label><input type="text" class="input" name="username"      
     id="username"/><span id="status"></span> 
    <button type="submit" id="submit" value="add">Save</button>
   </fielset>
</form>

腳本

<script type="text/javascript">
$(document).ready(function() {
    $("#username").change(function() {
        var username = $("#username").val();
        var msgbox = $("#status");

        if (username.length >= 4) {
            $("#status").html('<img src="images/gif/ajax-loading.gif">');

            $.ajax({
                type: "POST",
                url: "ajax_check.php",
                data: "username=" + username,
                success: function(msg) {

                    if (msg == 'OK') {

                         msgbox.html('<img src="/images/yes.png">');
                         return true;

                    } else {
                        msgbox.html(msg);            
                        return false;

                    }
                }
            });
        } else {

            $("#status").html('<img src="/images/no.png">too long!');
            return false;
        }
        return false;
    });
});

edit.php和ajax_check.php只包含一些SQL查詢。

此外，一些用戶在瀏覽器上禁用了JavaScript，我怎么能解決這個問題呢？

Answer 1

您可以將屬性添加到表單元素

onsubmit="return validate();"

如果JavaScript被禁用，那么你無能為力。 這就是您必須在服務器端應用數據驗證/實例化的原因。

Answer 2

這應該可以解決問題。 成功時重新啟用按鈕並在失敗時將其禁用。

   if (msg == 'OK') {                       
            msgbox.html('<img src="/images/yes.png">');
            document.getElementById('submit').disabled = false;  //enable submit

      } else {                    
            msgbox.html(msg);            
            document.getElementById('submit').disabled = 'disabled';  //disable submit
      }