Using new HTML5 form required fields in your next form (easy-peasy)…
When dealing with forms on a website, Owners / Administrators usually want all fields filled out before the user submits the data.
HTML5 helps us with this by introducing the required attribute.
The Boolean required attribute marks any form control as being required to have a value before the form can be submitted. In browsers supporting constraint validation, any fields with this attribute which lack a value will prevent the form from being submitted.
Try submitting the data without filling in a field or all fields. The required attribute prompts you to fill in the field before sending.
The HTML
<form id="ContactForm" class="form-horizontal" role="form">
<h3>Contact Form</h3>
<div class="form-group">
<label for="uname" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="uname" id="uname" size="40" placeholder="Your Message" required>
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">Phone:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="phone" id="phone" size="40" placeholder="Your Message" required>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" id="email" size="40" placeholder="Your Message" required>
</div>
</div>
<div class="form-group">
<label for="textarea" class="col-sm-2 control-label">Additional Information:</label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" name="msg" placeholder="Your Message" required></textarea>
</div>
</div>
<div class="form-group">
<input class="btn btn-lg btn-primary" type="submit" value="Submit">
</div>
</form>