CODEWITHSUNDEEP
javascriptjqueryhtml
sandeep.mishra
sandeep.mishra

Reputation: 825

HTMl5 required attribute not working when input type is image

Hello I have a form with some html controls and i have a image button. on click of this button i am using ajaxcall inside the function.When clicking the image the server side code executed but the required attribute is not working.Could you please help.. Below is my html code

<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>

Upvotes: 0

Views: 1496

Answers (1)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201628

The required attribute works, but on form submission. The constraints are checked by the browser on form submission, but the code in the onclick attribute is executed first. That is, when the image is clicked on, its onclick code is run first, and only after that it will be treated as a submit button that causes constraint validation.

You can fix this by explicitly calling a checking function in the Constraint Validation API:

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

Upvotes: 1

Related Questions