Javascript PHP表单提交和AJAX验证

编辑：

document.getElementById（'submit'）.disabled='disabled'返回false，那么code>会起作用

但由于某些原因，它也会在未使用用户名时禁用该按钮

---

下面是检查用户名可用性的基本脚本

如果已使用用户名，我如何阻止提交表单

理想情况下，我希望有一个JS警报框弹出

我尝试将此添加到JS中，但没有成功：

document.getElementById（'submit'）。已禁用

我还尝试将
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;
    });
});


$（文档）.ready（函数（）{
$（“#用户名”）.change（函数（）{
var username=$（“#username”）.val（）；
var msgbox=$（“#状态”）；
如果（username.length>=4）{
$（“#状态”）.html（“”）；
$.ajax({
类型：“POST”，
url:“ajax_check.php”，
数据：“用户名=”+用户名，
成功：功能（msg）{
如果（msg=='OK'）{
msgbox.html（“”）；
返回true；
}否则{
msgbox.html（msg）；
返回false；
}
}
});
}否则{
$（“#status”）.html（'太长！'）；
返回false；
}
返回false；
});
});

edit.php
和
ajax\u check.php
只包含一些SQL查询

另外，有些用户在浏览器上禁用了JavaScript，我如何才能避免这种情况？
您可以将属性添加到表单元素中

onsubmit="return validate();"

如果JavaScript被禁用，那么您对此无能为力。这就是为什么您必须在服务器端应用数据验证/验证的原因。
这应该可以做到这一点。成功时重新启用按钮，失败时禁用按钮

   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
      }

if（msg='OK'）{
msgbox.html（“”）；
document.getElementById（'submit'）。disabled=false；//启用提交
}否则{
msgbox.html（msg）；
document.getElementById（'submit'）。disabled='disabled'；//禁用提交
}
我认为
onclick=“return validate（）；”
应该可以做到这一点。你把它放在哪里了？它应该在按钮元素中。没有办法强制执行JS，实际上可以使用一些不知道JS是什么的下载实用程序（例如wget）访问该页面。：）@AntoanMilkov我刚才按照你说的做了，但是提交按钮仍然是可点击的，因此表单被提交。我真的需要确保没有客户可以拥有相同的usermame。它不应该出现在表单
onsubmit
事件中吗？类似于
。将其更改为：document.getElementById（'submit'）。disabled='disabled'查看发生了什么情况可以粘贴
函数validate
的代码吗？谢谢，但表单仍然可以提交。需要明确的是，
onsubmit=“return validate（）；”
应该放在提交按钮中，对吗？@benriff，不可以放在任何位置，只是语法不同而已。谢谢！现在可以用了！！我还应该为禁用Javascript的用户做些什么。有没有办法绕过这个问题，同时使用一些PHP来禁用按钮？您不应该只依赖客户端验证。还要使用适当的服务器端验证。客户端验证只是为了更好的用户体验。任何人都可以绕过这些验证。提交表单后，您可以检查用户是否已注册，并相应地显示正确的消息。