I'm encountering an issue with the form on my webpage. It transitions to show a thank you picture, but even though all inputs are required, the transition still happens if not every field is filled out.
My suspicion is that the problem lies with using an input element with type="image". When I switch to a regular button element, the transition only occurs when all fields are completed.
Additional information: The form functions correctly on the backend, it just shouldn't trigger the change unless all inputs are populated.
HTML (form)
<form id="form" action="/" method="POST">
<div>
<div class="inputName">
<label for="name">Name</label>
<input class="input" type="text" id="name" name="name" required>
</div>
<div class="inputEmail">
<label for="email">Email</label>
<input class="input" type="text" id="email" name="email" required>
</div>
</div>
<div>
<div class="inputSubject">
<label for="subject">Subject</label>
<input class="input" type="text" id="subject" name="subject" required>
</div>
</div>
<textarea name="message" id="text" cols="30" rows="10" required></textarea>
<input type="image" id="send" src='https://i.imgur.com/Tt39rjV.png' onmouseover="this.src='https://i.imgur.com/81fmcHg.png';" onmouseout="this.src='https://i.imgur.com/Tt39rjV.png';" border="0" alt="Send" />
</form>
EDIT: It's worth mentioning my JavaScript/jQuery code responsible for the fading effect:
$('#message').click(function(e){
$('.contact1').fadeOut('slow', function(){
$('.contact2').fadeIn('slow');
});
});
$('#send').click(function(e){
$('.contact2').fadeOut('slow', function(){
$('.contact3').fadeIn('slow');
});
});