Validation on form field (radio button)

[newmay]

Hey,

I want to get a validation on a form field typ radio button. It is about the Terms of use (schema name: termsofuse).

I want that the form can only be submitted if the radio button is checked with yes (value: 1).

Could anyone assist my with this? I know there is a javascript validation for it, yet i am not sure how to implement it correctly/modify it.

Thanks!

[ragavanrajan]

Hi @newmay 

Try making it as required field. This will throw a validation error to user when they try to submit it. 

Hope it helps.

------------

If you like this post, give it a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users to find it.

[newmay]

@ragavanrajan Hey but then I could submit the form if the radio button value "no" is selected or? and that the form only gets submitted when selecting yes

[OliverRodrigues · Accepted solution]

This article should help you to add a form validator: Add custom JavaScript - Power Apps | Microsoft Docs

if you can't get it working, please post your code here or on a new thread and we can see what might be missing 

[newmay]

Hi @OliverRodrigues 

Hey that would be my code:

if (window.jQuery) {
(function ($) {
$(document).ready(function () {
if (typeof (Page_Validators) == 'undefined') return;
// Create new validator
var newValidator = document.createElement('span');
newValidator.style.display = "none";
newValidator.id = "termsofuseValidator";
newValidator.controltovalidate = "termsofuse";
newValidator.errormessage = "<a href='#termsofuse_label'>Terms of use needs to be selected with "Yes" </a>";
newValidator.validationGroup = ""; // Set this if you have set ValidationGroup on the form
newValidator.initialvalue = "";
newValidator.evaluationfunction = function () {
var termsofuse= $("#termsofuse").val();
if (termsofuse != 1) return true; // check if terms of use radio button is selected with No (value 0).

return false;
} else {
return true;
}
};
//Not sure what this is for
// Add the new validator to the page validators array:
Page_Validators.push(newValidator);
-
// Wire-up the click event handler of the validation summary link
$("a[href='#emailaddress1_label']").on("click", function () { scrollToAndFocus('emailaddress1_label','emailaddress1'); });
});
}(window.jQuery));

Basically I need that the form is only sendable if: 

Yet I am not sure how to write or modify the javascript validation properly to achieve this

[newmay]

Hi! Quick update! I did sove it. Did not use the right id´s

$(document).ready(function() {

    removeValidator("termsofuse_1");

    $("#termsofuse_1").parent().prev().removeClass('required');

    // Add event validator

    if (typeof(Page_Validators) == 'undefined') return;

        // Create new validator

        var newValidator = document.createElement('span');

        newValidator.style.display = "none";

        newValidator.id = "termsofuseValidator";

        newValidator.controltovalidate = "termsofuse_1";

        newValidator.errormessage = "<a href='#termsofuse_label'>Bitte akzeptieren Sie die Nutzungsbediengungen.</a>";

        newValidator.evaluationfunction = function() {

        if($("#termsofuse_1").is(':checked'))

        {

            return true;

        }

        else

        {

            if ($('#termsofuse_1').val() == "1") {

                return false;

            } else {

                return true;

            }

        }

    };

    Page_Validators.push(newValidator);

})

function removeValidator(fieldName) {

var count = 0;

for(var i =0; i < Page_Validators.length - count; i++){

if (Page_Validators[i - count].id == "RequiredFieldValidator" + fieldName) {

Page_Validators.splice(i - count, 1);

count++;

}

}

$("#" + fieldName + "_label").parent().removeClass("required");

}

Thanks!