CUSTOMIZE OOB FORM VALIDATION IN POWERAPPS PORTALS & POWER PAGES

One common requirement is to show validation messages next to the specific fields that have errors, rather than displaying them at the top of the form as displayed in picture. In this blog post, we will discuss a workaround to achieve this using JavaScript and jQuery.

By default, PowerApps portals display validation messages at the top of the form, which can be confusing for users, especially if the form contains many fields. To show validation messages next to the specific fields that have errors, we can add a custom "Submit" button and hide the actual submit button of the OOB form.

When the custom button is clicked, we can use JavaScript or jQuery to check the values of the form fields and display error messages next to the specific fields that have errors. We can use also jQuery validate library for this purpose, which is not used in this blog.

Once the fields are validated, we can use JavaScript to trigger the click event of the actual submit button, which will then submit the form and leverage the OOB "Submit" button's functionality. This will allow us to use the built-in form submission functionality, while also providing a more user-friendly validation experience.

The following code can be used to achieve this task:

var $btn_custom = $('<input/>').attr({

    type: 'button',

    class: 'submit-btn btn btn-primary',

    id: 'btn1',

    value: 'Submit'

});

$(".actions").prepend($btn_custom); //insertion of custom button

$("#InsertButton").hide(); //hiding the actual submit button

//customizing the validation on click of custom button

$('#btn1').on('click', function () {

    containersize = $('#gs_containersize').val();

    if (validation() != false) {

        $("#InsertButton").click(); //if the validation is sucessful, onclick event of actual SUBMIT button is triggered.

    }

});

function validation() {

    if (containersize == '' || containersize == null) {

        $("#gs_containersize").closest('td').find('label[class=validation]').remove();

        $('#gs_containersize').after('<label style="color:red" class = "validation">This field is required</label>'); //Adding validation

        return false

    }

    else {

        return true

    }

}

In this blog post, we discussed a workaround to achieve this using JavaScript and jQuery. By adding a custom "Submit" button, hiding the actual submit button, and using JavaScript or jQuery to check the values of the form fields, we were able to customize the validation process and display error messages next to the specific fields that have errors.

Join us next time, as we continue our journey of learning canvas apps.Click here to learn more about Imperium's Power Apps Services. We hope this information was useful, and we look forward to sharing more insights into the Power Platform world.

---

---