search

sb2g14 / soton_3D_print

3 stars 0 forks source link

Sort out Javascript validations #114

Closed GHLasse closed 6 years ago

GHLasse commented 6 years ago

Think about having one file for generic javascript validations, then call those functions with a html-id and get the error-div set as well as true or false returned. Have a javascript file for each form, calling all the necessary validation functions and managing the sum of errors. That way we can improve validation for specific fields across the website.

GHLasse commented 6 years ago

This turns out to be more tricky than I thought. Will need a builder to test this, since I can't get $.getScript from jQuery to run.

GHLasse commented 6 years ago

I think I managed to solve this one. So after loading the functions from a master validation file using NodeJS as we did on Friday, we should be able to call those functions as follows:

<html>
<head>
</head>
<body>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<!-- HTML PART IN JSFIDDLE -->
<div>Test1: <input type="text" id="test1" value=""/></div>
<div id="msgA"></div>
<div>Test2: <input type="text" id="test2" value=""/></div>
<div id="errs"></div>
<div>Test3: <input type="text" id="test3" value=""/></div>
<div id="msgB"></div>
<!-- END HTML PART IN JSFIDDLE -->
<script>
/* JS PART IN JSFIDDLE */
//validation functions (can be loaded from other file via NodeJS)
function changeA(message) {
  $("#msgA").html(message);
  return false;
}

function changeB(message) {
  $("#msgB").html(message);
  return false;
}
//create a dictionary to keep track of the errors for the fields
var errors = {
  "#test1": true,
  "#test2": true,
  "#test3": true
};
//map the field ids to the functions in this dictionary, skip input fields that you need to treat extra...
var funs = {
  "#test1": changeA,
  "#test3": changeB
};
//construct to modify the keyup function for ALL input fields
$("input[type='text']").keyup(function() {
  //here we create a variable for the validation function for that field, passing the field id to it as an argument
  var fun = funs["#" + $(this).attr('id')];
  //if that function was in the dictionary, then call it.
  if (fun) {
    errors["#" + $(this).attr('id')] = fun($(this).val());
  }
});
//then deal with special input fields
$("#test2").keyup(function() {
  $("#errs").html(errors["#test1"] + " " + errors["#test2"] + " " + errors["#test3"]);
});
/* END JS PART IN JSFIDDLE */
</script>
</body>
</html>

Just paste this code into a file and call it test.html. Then open it in a browser. You can also test this in https://jsfiddle.net/ - just remember to set the javascript field to use jQuery.

To be honest, I don't know what I did different to pur previous attempts, so it may well be, that this doesn't work in our environment. But if so, then we at least know that the problem is with the environment rather than us :-P

GHLasse commented 6 years ago

I forgot to mention this in my commit just now. I implemented the changes above for request_online_job_validation.js

GHLasse commented 6 years ago

I have an idea how to combine all the validation files. I will test that soon. But it requires you to update/unify the ids in the forms.

GHLasse commented 6 years ago

we need to make sure that "optional comments" like in /printingData/show/2728 remain optional. i.e. they can't use the message validator function

GHLasse commented 6 years ago

Printer Type in /printers/create has a maximum length but is currently not checked for (probably need to increase that actually, so we can put the full name of the Prusa printers in there)

GHLasse commented 6 years ago

I think I finished the javascript validations, pending testing. What remains is to include the file in the blades and unify some field names. Afterwards we need to test the fields and add missing validation functions (since some fields currently are not validated)