What is the best place to put custom validation code?

[inanoffice23]

I found a couple of validation codes, and I made a mix and match, (this is the 'shortest' way to validate fields I have found online, I would love to see a shorter version even!) 

I currently put all of the below on each form, I find that if I put it too low, the set required won't be seen by Javascript and I then place it a bit too high, but it then hides the functions underneath, I tried removing semicolons, brackets, but I can't seem to win, at some point Javascript stops running and it doesn't read the whole .js code

I believe I might be able to add it as a content snippet, but it would be painful to have to place it for every page, or is there a way to leave it alone in one place, and pull it for every single page? The code I want to isolate is below

Then on each .js form I'd add whichever fields I required

if(varName !== null){
setRequired('Name', message);
setOptional('Surname', message);
}

setRequired = function (fieldName) {
  var $label = $("#" + fieldName + "_label");
  $label.parent().addClass("required");
  addValidator(fieldName, $label.text());
};

setOptional = function (fieldName) {
  var $label = $("#" + fieldName + "_label");
  $label.parent().removeClass("required");
  removeValidator("RequiredFieldValidator" + fieldName);
};

addValidator = function (fieldName, label) {
  var nV = document.createElement("span");
  var message = "<span class='font-weight-bold'>" + (typeof label === "string" ? label : fieldName) + "</span> is a required field.";
  nV.style.display = "none";
  nV.validationGroup = "";
  nV.initialvalue = "";
  nV.id = "RequiredFieldValidator" + fieldName;
  nV.controltovalidate = "#" + fieldName;
  nV.errormessage = "<a href=\'#" + fieldName +
      "_label\' onclick=\'javascript&colon;scrollToAndFocus(\"" + fieldName + "_label\",\"" +
      fieldName + "\");return false;\'>" + message + "</a>";
  var $field = $("#" + fieldName);
  nV.evaluationfunction = function () {
      var value = $field.val();
      return typeof value === "string" && value !== "";
  };
  var $validator = $field.closest("td").find("div.validators");
  if ($validator.length === 0) {
      var $info = $field.closest("td").find("div.info");
      $validator = $("<div class='validators'></div>").appendTo($info);
  }
  $validator.append(nV);
  Page_Validators.push(nV);
};

removeValidator = function (validatorId) {
  $.each(Page_Validators, function (index, validator) {
      if (validator !== null && validator !== undefined &&
          validator.id === validatorId) {
          Page_Validators.splice(index, 1);
      }
  });
};

[OliverRodrigues]

Instead of putting that on each form/page, you can do the following:

• Create a single .JS file with all your "common/reusable code"
• Upload this as a Web Rile
  • in the file itself, remove the .js extension
  • in the Partial URL you can keep .js as extension
• Update/Create the Content Snippet called Tracking Code
  • this snippet runs on every portal page load
  • add the reference to your JS library there

There you go.. you can now reuse your code no matter where you are, let me know if you need help with any of the steps above 

[inanoffice23]

Thank you @OliverRodrigues 

I added this to the Content Snippet which I called Tracking Code, set value below as HTML

<script type="text/javascript" src="~/Validation.js"></script>

I uploaded web file without the .js extension and partial url is Validation.js 

I tried to add in a multi step form Javascript (form options) the below, and it gives an Uncaught ReferenceError: setRequired is not defined

When I looked in Youtube, they added a note to the webfile to upload the file, however I can't seem to have that option, only 'File content', I wonder if that is why? 

Otherwise, I wonder what I am missing?

setRequired('bsbt_name', message);

$(document).ready(function () { 

setRequired = function (fieldName) {
var $label = $("#" + fieldName + "_label");
$label.parent().addClass("required");
addValidator(fieldName, $label.text());
};

setOptional = function (fieldName) {
var $label = $("#" + fieldName + "_label");
$label.parent().removeClass("required");
removeValidator("RequiredFieldValidator" + fieldName);
};

addValidator = function (fieldName, label) {
var nV = document.createElement("span");
var message = "<span class='font-weight-bold'>" + (typeof label === "string" ? label : fieldName) + "</span> is a required field.";
nV.style.display = "none";
nV.validationGroup = "";
nV.initialvalue = "";
nV.id = "RequiredFieldValidator" + fieldName;
nV.controltovalidate = "#" + fieldName;
nV.errormessage = "<a href=\'#" + fieldName +
"_label\' onclick=\'javascript&colon;scrollToAndFocus(\"" + fieldName + "_label\",\"" +
fieldName + "\");return false;\'>" + message + "</a>";
var $field = $("#" + fieldName);
nV.evaluationfunction = function () {
var value = $field.val();
return typeof value === "string" && value !== "";
};
var $validator = $field.closest("td").find("div.validators");
if ($validator.length === 0) {
var $info = $field.closest("td").find("div.info");
$validator = $("<div class='validators'></div>").appendTo($info);
}
$validator.append(nV);
Page_Validators.push(nV);
};

removeValidator = function (validatorId) {
$.each(Page_Validators, function (index, validator) {
if (validator !== null && validator !== undefined &&
validator.id === validatorId) {
Page_Validators.splice(index, 1);
}
});
};
})

[OliverRodrigues]

"When I looked in Youtube, they added a note to the webfile to upload the file, however I can't seem to have that option, only 'File content', I wonder if that is why? "

File Content is absolutely fine, the videos are probably older and using the classic data model, you are probably using the Enhanced Data Model.

A few snapshots of my enviornment:

Tracking Code:

Web File:

Also, did you clear the server-side cache? 

[inanoffice23]

Thank you for the screen shots, I have the same settings

I believe it is where I am placing the Javascript, although not too sure where to place it exactly

I had it under the display change, and I moved it to the top, but it's still complaining about some HTML error

Uncaught ReferenceError: setRequired is not defined
at HTMLDocument.<anonymous>

$(document).ready(function () {
  setRequired('bsbt_name', message);
  $("#gpbt_customertype").change(onDisplaySectionChange);
  onDisplaySectionChange();
});

var customertype;

function onDisplaySectionChange() {
var  customertype = $("#bsbt_customertype").find("option:selected").text();
}

[OliverRodrigues]

a few things to try:

• <script type="text/javascript" src="~/Validation.js"></script>

  • you dont need the ~ symbol.. although I wouldn't say that's the issue
• can you try to access your JS file to make sure it's accessible
  • for example: <portal>.powerappsportals.com/validation.js
• can you try to call your method via Browser Console?
• can you check via Browser Dev Tools if your file is being loaded?

[inanoffice23]

Thank you, btw I forgot to reply that yes I cleared the cache and yes I have the enhanced data model type

When I look for the file in the url it does load up and allows me to download the file

It loads in the Resources section of Dev Tools

If I try to call the method, it reads the setOptional or setRequired but when it comes to typing message, it doesn't seem to find it, it gives me an undefined error

I checked Stackoverflow and they suggest I haven't declared the variable 'You are sending data as the body of your request, but first you have to defined the object you are sending to API' and I tried to place the variables before the document ready in the multistep form Javascript, as mentioned in the link, but no luck so far

javascript - Uncaught ReferenceError: data is not defined at HTMLDocument.<anonymous - Stack Overflo...

It seems to give a slightly different message now Uncaught TypeError: setRequired is not a function

Wondering if this has anything to do with it - The preprocessors or packer will wrap your code in a seperate scope to prevent filling up the global space. How to fix the error "uncaught reference error: data is not defined" using javascript? - Stack Overf...
 

[OliverRodrigues]

Hi, I think one issue here is that you haven't defined "message" before calling the method:

  setRequired('bsbt_name', message);

can you change this to:

  var message = "hello world";
  setRequired('bsbt_name', message);

[inanoffice23]

I guess you mean in the multistep form, it keeps giving me the error. In theory the message variable has been defined after the 'addvalidator' 

Uncaught ReferenceError: setRequired is not defined
    at HTMLDocument.<anonymous>

[inanoffice23 · Accepted solution]

Thank you so much for your help @OliverRodrigues I just had to do 2 things to solve this, one upload the file as Javascript file, and 2 remove the document ready line 🙂 I removed the ~ too just in case

When uploading your Javascript as a Web File, some people from the Power Pages community tend to omit the .js extension name, this way they can overcome the 'file not allowed' error
The issue with this, is that the mimetype will be application/octet-stream and you will encounter this error when you set your Security settings
Refused to execute script from 'https://yourportal.powerappsportals.com/Validation.js' because its MIME type ('application/octet-stream') is not executable, and strict MIME type checking is enabled.
You can only find the mimetype in your Javascript webfile.yml file, from Visual Studio Code, as it doesn't seem to be visible from Power Pages Management or Advanced settings, as far as I have seen

Solution:
Power Apps
Settings > Advanced settings
Administration > System Settings
Set blocked file extensions for attachments: delete js;
This way it will allow you to upload a .js file as a Web File
Once uploaded, add the .js; as a blocked file extension again
You will see from Visual Studio Code that your webfile.yml says mimetype: application/javascript and it won't give you any further errors