html 5 text input validation not working

Question

I have the following code:

<section id="about" class="home-section color-dark bg-white">

<form id="contact-form" class="wow bounceInUp" data-wow-offset="10" data-wow-delay="0.2s" action="load_event.php" method="post">
    <div class="container marginbot-50">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <div class="wow flipInY" data-wow-offset="0" data-wow-delay="0.4s">
                <div class="section-heading text-center">
                    <h4 class="h-bold">Encuentra un evento</h4>
                    <input type="text" class="form-control input-lg" required placeholder="ID del evento" oninvalid="this.setCustomValidity('Este campo es requerido')" id="event_id" name="event_id"></input>
                    <input type="submit" class="btn btn-skin btn-lg btn-block" value="Buscar" ></input>
                </div>
                </div>
            </div>
        </div>
    </div>
</form>

</section>

but the required validation on the text input tag works only the first time, if I click on the submit button the first time with the text field empty, the following attempts will say that the field is empty even if it is not. This behavior is the same on Firefox and Internet Explorer. Any ideas?