For client-side validation inside your form, you need to include the below script in your form container. Later you can design the summary(out of the box form) based on your need.

Reference : Daved

<script type="text/javascript">
    // vanilla js - not jQuery dependent so it works with noJS mode for Forms
    function addValidationSummary(form) {
        if (typeof form === 'undefined') { return; }
        // utilize the status message field
        var statusField = form.querySelector('.Form__Status'); // only one should exist
        var validationWrapper = statusField.querySelector('.Form__Validation__Summary') ?? document.createElement('div');
        validationWrapper.innerHTML = '';
        validationWrapper.classList.add('Form__Validation__Summary');
        var validFails = form.querySelectorAll('.ValidationFail');    // loop through failed items
        validFails.forEach(function (ele, idx) {
            // use the error field to reference the form element
            // - it's not always an input so this is more accurate
            var error = ele.querySelector('.Form__Element__ValidationError');
            var fieldName = error.dataset.fLinkedName; // use es6 dataset to access data attribute
            if (fieldName == null || fieldName.trim() == '') { return; }
            var linkedField = ele.querySelector(`[name='${fieldName}']`);
            var label = ele.querySelector('label'); // label is easy inside validation fail
            // assemble summary elements
            // using a label lets us click to go to the failed element
            var errorLabel = document.createElement('label');
            errorLabel.setAttribute('for', linkedField.id);
            errorLabel.textContent = `${label.textContent}:`;
            var errorText = document.createElement('span');
            errorText.classList.add('Form__Element__ValidationError');
            errorText.textContent = error.textContent;
            var summaryError = document.createElement('div');
            summaryError.classList.add('validation-summary-error');
            summaryError.append(errorLabel, errorText);
            validationWrapper.appendChild(summaryError);
        });
        statusField.appendChild(validationWrapper);
    }
    if (typeof $$epiforms !== 'undefined') {
        $$epiforms(function () {
            $$epiforms('.EPiServerForms').on('formsStepValidating', function (event) {
                if (!event.isValid) {
                    addValidationSummary(event.target);
                }
            });
        });
    }
</script>