添加CSS后，表单提交不起作用

Question

我的一个表格有这个奇怪的问题。这是我的表单的HTML代码：

 <div id="login">
    <form class="login_form" name="login_form" method="post" onSubmit="return validate(this)" action="">
        <!--<input type="hidden" name="siteToken" value="<?php echo $token; ?>" />-->
        <input type="text" name="username" placeholder="Username" autofocus="autofocus" required="required" /><br />
        <input type="password" name="password" placeholder="Password" required="required" /> <br />
        <input type="submit" value="Login" />
     </form>
</div>

事实上，一切都很顺利。提交表单后，它会触发javascript验证功能，然后表单提交。

一旦我添加了CSS样式，没有任何效果。表单根本不提交。标准按钮甚至不起作用。

例如，如果我将这个CSS添加到它

.login_form {
width: 400px;
padding: 15px;
border: 5px solid #ccc;
}

表单提交停止工作。我不明白为什么。

感谢任何帮助。

注意：让我补充一下，我不知道CSS是否影响HTML表单或javascript。

编辑：这是我的验证功能

<script language="javascript" type="text/javascript">
function validate(form)
{
    fail = validateUsername(document.login_form.username.value);
    fail += validatePassword(document.login_form.password.value);

    if(fail == "")
        return true;
    else
        alert(fail);
        return false;
}
</script>

function validateUsername(field)
{
    if (field == "") return "No username was entered. \n";
    return "";
}

function validatePassword(field)
{
    if (field == "") return "No password was entered. \n";
    return "";
}