HTML5 验证不起作用 OnChange 选择框表单提交答案

【问题标题】：HTML5 validation not working On OnChange select box form SubmitHTML5 验证不起作用 OnChange 选择框表单提交
【发布时间】：2014-07-25 08:44:46
【问题描述】：

HTML5 验证不起作用 OnChange 选择框表单提交。

如果我使用提交按钮验证工作，但我需要onChange 表单提交和 html% 验证

<form action="do.php" method="post">
    <select id="myselect" name="myselect" onchange="this.form.submit()" required="">
        <option value="">
            select
        </option>

        <option value="1">
            One
        </option>

        <option value="2">
            Two
        </option>

        <option value="3">
            Three
        </option>

        <option value="4">
            Four
        </option>
    </select> <select id="myselect2" name="myselect2" onchange="this.form.submit()" required="">
        <option value="">
            select
        </option>

        <option value="5">
            five
        </option>

        <option value="6">
            six
        </option>

        <option value="7">
            seven
        </option>
    </select>
</form>

这是在没有验证其他选择框的情况下提交更改表单的条件。请帮忙。

【问题讨论】：

标签： javascript jquery html forms

【解决方案1】：

HTML5 验证仅适用于使用 HTML 构造提交的表单。如果使用脚本提交，则不会进行 HTML5 验证。因此，您需要在 JavaScript 中编写自己的验证代码。

参考：HTML5 LC, 4.10.22.3 Form submission algorithm，其中第 4 项列出了执行验证的条件，包括未设置“提交自 submit() 方法标志”的要求。

【讨论】：

【解决方案2】：

您可以使用这个“黑客”http://jsfiddle.net/MGhA7/。

你指定<select required="required">所以值不能为空，然后添加<option value="" selected disabled>empty</option>所以默认值为空，不能再次选择。

编辑：多一点解释。

这样，表单无法提交，因为“selected”值实际上是“”（空），这是“required”属性所不允许的；并且当用户更改选择时，由于“禁用”属性，无法再次选择默认值。

【讨论】：