How to add validation to user input before they submit - html

Question

I wanted to add validation to this input
<div class="col-lg-6">
<!-- Content Here -->
<!-- Needs Validation -->
<input type="text" name="name" class="form-control" id="name" value="" required>
<a class="btn btn-hercules-font btn-lg btn-block mt-5" href="add_workout_2.php" role="button" id="add_button">+ ADD EXERCISES TO WORKOUT</a>
</div>
I tried using the required tag but it doesn't seem to work (I can just click the submit button without inputting any value).
Edit:
<form action="add_workout_2.php">
<input type="text" name="name" class="form-control" id="name" value="" required>
<a class="btn btn-hercules-font btn-lg btn-block mt-5" type="submit" role="button" id="add_button">+ ADD EXERCISES TO WORKOUT</a>
</form>

Answer 1

In this case the "required" parameter will only trigger, if a valid "submit" event is getting called correctly. Anchor tags has the "type" parameter, but it's not for the same use as an input/button tag. I'd suggest that you convert your anchor tag to a button as follows:
<form action="add_workout_2.php">
<input type="text" name="name" class="form-control" id="name" value="" required>
<button class="btn btn-hercules-font btn-lg btn-block mt-5" type="submit" role="button" id="add_button">+ ADD EXERCISES TO WORKOUT</button>
</form>
Then you'll get the wanted result. If you don't want the styling of the button, you can work around that with styling. For future reference, you don't need to add "value="" to the input tag for having an empty tag :-)
I hope it helped.

Answer 2

Change your code to this:
<form action="add_workout_2.php">
<input type="text" name="name" class="form-control" id="name" required>
<input class="btn btn-hercules-font btn-lg btn-block mt-5" type="submit" role="button" id="add_button" value="+ ADD EXERCISES TO WORKOU">
</form>