How to display all required error once with required attribute

Question

The required attribute in input type display's once at a time. Is it possible to display required notification in html5 all at once when the user submits the form?

Answer 1

This snippet will help you to implement form validation. Here we are adding a data attribute data-required to identify the required field and implement the validation logic.

 var $ = jQuery; $('#form').on('submit', function(e) { e.preventDefault(); let validation = validateForm($(this)) }) validateForm = (formElement) => { let form = formElement; let valid = true; $('.error').remove(); const generalError = "<span class='error'>This Field can not be empty</span>"; form.find('.form-group').each(function(index, item) { let formItem = $(item).find('.form-item'); // check only inputs with validation required if (formItem.data('required')) { let type = formItem.data('field'); let formItemLength = formItem.val().length if (formItem.val() === '') { $(item).append(generalError) valid = false } if (formItem.attr('type') == 'checkbox' && !formItem.is(':checked')) { $(item).append(generalError) valid = false } } }) return valid }

 form { padding: 20px; background: #2c3e50; color: #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } form label, form input, form button { border: 0; margin-bottom: 3px; display: block; width: 100%; } form input { height: 25px; line-height: 25px; background: #fff; color: #000; padding: 0 6px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } form button { height: 30px; line-height: 30px; background: #e67e22; color: #fff; margin-top: 10px; cursor: pointer; } form .error { color: #ff0000; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <form id="form" method="post"> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-item" id="name" name="name" data-field="name" data-required="required"> </div> <div class="form-group"> <label for="lastname">Lastname</label> <input type="text" class="form-item" id="lastname" name="lastname"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" id="email" name="email" class="form-item" data-field="email" data-required="required"> </div> <div class="form-group"> <label for="phone">Phone</label> <input type="text" id="phone" name="phone" class="form-item" data-field="phone" data-min="6" data-max="8" data-required="required"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-item" id="password" name="password" data-field="password" data-min="6" data-max="12" data-required="required"> </div> <div class="form-group"> <label for="agreement">Agreement</label> <input type="checkbox" class="form-item" id="agreement" name="agreement" data-required="required"> </div> <div class="form-group"> <label for="description">Description</label> <textarea cols="57" id="description" name="description" rows="10" class="form-item" data-field="description"></textarea> </div> <div class="form-action"> <input class="form-submit" type="submit" value="Apply"> </div> </form>