How to change normal behaviour of input submit button for unfilled and required inputs?

Say you have an html form like the one below.

<form>
<input type="text" required>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input type="submit">
</form>


If you click on the submit button without filling the required input, three thing will generally happen.

Here is a jsfiddle to see this in action.http://jsfiddle.net/q47kepd0/

I am working on a project where I am making an html file version of a wordpress theme. In the theme the first thing that involves scrolling does happen but the second and the third things don't. So there must be a way to disable them, probably with javascript. I am a newbie in javascript and so far I have googled and googled but haven't yet been able to find a way to do so. Can anyone help?

P.S Sorry if there are any english related errors in my questions, feel free to suggest edits. Also I need to disable them for specific inputs, not for all of them.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.