The 'required' attribute is not functioning properly when I try to submit the form. I've searched online for a solution, but none of them have resolved my problem. Take a look at the code snippet below - I've used the required attribute in the first field but no error message shows up upon submission.
Additionally, the data-match="#email" attribute doesn't appear to be working to verify if the email input matches the confirm email input.
<!DOCTYPE html>
<html>
<title>Unique Stripe Payment Demo</title>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/4.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
body {
margin: 0 auto;
width: 800px;
}
form {
width: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<form action="payment" method="POST" enctype="multipart/form-data" >
<div class="form-group">
<label for="uname">Full Name:</label>
<input type="text" id="fname" class="form-control" name="uname" maxlength="50" value="John" required>
</div>
<div class="form-group">
<label for="file">Select your picture :</label>
<input type="file" class="form-control" id="myfile" name="file">
</div>
<div class="form-group">
<label for="tag1">Search Keyword 1:</label>
<input required type="text" class="form-control" id="tag1" name="tag1" maxlength="50" value="Enter keyword 1">
</div>
<div class="form-group">
<label for="tag2">Search Keyword 2:</label>
<input type="text" class="form-control" id="tag2" name="tag2" maxlength="50" value="Enter keyword 2">
</div>
<div class="form-group">
<label for="website">Website:</label>
<input type="text" class="form-control" id="website" name="website" maxlength="70"
value="Enter the website">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email" maxlength="100"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" value="Enter your email">
</div>
<div class="form-group">
<label for="confirmemail">Confirm Email:</label>
<input type="confirmemail" class="form-control" id="confirmemail" name="email" maxlength="100"
data-match="#email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" value="Re-enter your email">
</div>
<div class="form-group">
<label for="description">About you:</label>
<textarea class="form-control" id="description" maxlength="160" rows="3"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</body>
</html>