// input if empty in bootstrap but can be used even without bootstrap
// In your html file
// take note id="frm_subscription" and required class be in all of your required inputs
<form id="frm_subscription">
<div class="form-group">
<div class="row">
<div class="col-md-6 col-xs-12">
<input type="text" class="form-control form-input border required" name="business_name" placeholder="Business Name *" required="true">
</div>
<div class="col-md-6 col-xs-12">
<input type="text" class="form-control form-input" name="business_address" placeholder="Business Address">
</div>
</div>
</div>
</form>
// In your js
function validate(formId) {
let valid = true;
$.each(formId, function(i, field) {
$("[name='" + field.name + "']").prev('.text-danger').remove();
if (field.value == "" && $("[name='" + field.name + "']").prop('required')) {
valid = false;
// you can customise your error styles based on your theme
// Below couple of lines are example used in bootstrap
$("[name='" + field.name + "']").css({ "border": "1px solid #ff000087" });
$("[name='" + field.name + "']").before('<span class="text-danger">This field is required *</span>');
}
});
return valid;
}
// usage : if false dont continue
if (!validate($("#frm_subscription").serializeArray())) { return; }