输入类型为图像时,HTMl5必需属性不起作用

时间:2014-01-15 06:32:30

标签: javascript jquery html html5

你好,我有一个带有一些html控件的表单,我有一个图像按钮。单击此按钮我在函数内部使用ajaxcall。单击图像时,服务器端代码已执行但所需属性不起作用。请你帮忙.. 以下是我的HTML代码

<form id="form1" runat="server">
    <div class="col span1of2" id="divUserInfo" runat="server">
        <ul class="form">
            <li class="form-item">
                <label>Achternaam*</label>
                <input type="text" required id="txtName" />
            </li>
            <li class="form-item">
                <label>Emailadres*</label>
                <input type="email" required id="txtEmail" />
            </li>
            <li class="form-item">
                <label>Klantnummer</label>
                <input type="text" id="txtCustomerId" />
            </li>
            <li class="form-item">
                <label>PostCode*</label>
                <input type="text" required id="txtPostCode" />
            </li>
            <li class="form-item">
                <label>Huisnummer*</label>
                <input type="text" required id="txtHouseNumber" />
                <div class="extend right">
                    <label>Toevoeging</label>
                    <input type="text" id="txtExtraHouseNumber" />
                </div>
            </li>
            <li class="form-item">
                <label>Onderwerp*</label>
                <input type="text" required id="txtSubject" />
            </li>
            <li class="form-item">
                <label>Uw- bericht</label>
                <input type="text" id="txtComment" />
            </li>
        </ul>
        <input type="image" src="/images/buttons/btn_send.png" onclick="SaveContactFormDetails();" />
    </div>
</form>

1 个答案:

答案 0 :(得分:1)

required属性有效,但在表单提交时有效。浏览器在表单提交时检查约束,但首先执行onclick属性中的代码。也就是说,当单击图像时,首先运行其onclick代码,然后才会将其视为导致约束验证的提交按钮。

您可以通过在Constraint Validation API中明确调用检查函数来解决此问题:

onclick=
"if(document.getElementById('form1').checkValidity()) SaveContactFormDetails();"