javascript - 表单提交绕过 javascript 验证

Question

下面的提交绕过了 javascript 验证。是因为 onclick 还是我错过了什么？

谢谢

形式

<form name="myprofile" action="do_update" method="post" onsubmit="return validate_submission(this.name)">
   <input type="text" id="text_fullname" name="text_fullname" value="" maxlength="100" />
   <div id="submit_button" onclick="document.myprofile.submit()">SUBMIT</div>
</form>

JS

function validate_submission(formname)
{
    alert(formname); return false;
}

Answer 1

您正在使用onclick的不是您正在使用form_ref.submit()的提交表单而不触发submit事件的方法。

您的选择：

• 使用真正的提交按钮（不要submit()用 JS 调用）。这是最好的选择。它将以屏幕阅读器表单模式显示。它可以被标签到。如果 JS 没有打开，它将工作。
• 调用验证函数并在调用之前检查结果submit()。

Answer 2

添加一个额外的提交脚本，并从 div 调用它...

<script>
    function validate_submission(formname)
    {
        var is_valid = false;

        if (formname == 'myprofile')
        {
            is_valid = true;
        }

        perform_submit(formname, is_valid);
    }

    function perform_submit(formname, is_valid)
    {
        if (is_valid === true)
        {
            document.myprofile.submit()
        }
        else
        {
            alert('Invalid');
        }
    }
</script>
<form name="myprofile" action="do_update" method="post" onsubmit="return validate_submission(this.name)">
   <input type="text" id="text_fullname" name="text_fullname" value="" maxlength="100" />
   <div id="submit_button" onclick="validate_submission('myprofile')">SUBMIT</div>
</form>
</body>