addToValidate for Custom Dropdown Condition

In Edit View, addToValidate function is loaded in the footer, if we include a custom JS file (via editviewdefs include parameter) for custom validations and dynamic required fields, it will get executed before (even with doc ready or on load ) while the footer functions run after it. I have tried following options in the Custom JS script to make the custom validations override the default but it does not take effect.

$(function() {
$(document).load(function() {
YAHOO.util.Event.onDOMReady(function(){
YAHOO.util.Event.onContentReady(function(){

Based on a certain dropdown field, custom Validation function makes other Fields Required/Not Required.

@cherub-chum
I made it without problem. I used 2 functions ā€œremoveFromValidateā€(remove current) and ā€œaddToValidateā€(add new) . I switched control for field assigned_user_id . For example look at the codes. Attention the fourth parameter of ā€œaddToValidateā€ function.
switched off:

let msg = document.getElementById('assigned_user_name').parentElement.previousElementSibling.innerHTML.split(':')[0];
document.getElementById('assigned_user_name').parentElement.previousElementSibling.innerHTML = msg+':';
removeFromValidate(name_form,'assigned_user_id');
addToValidate(name_form,'assigned_user_id','varchar',false, msg);

switched on:

var required_switch = document.createElement('span');
required_switch.className = 'required';
required_switch.innerHTML = '*';
document.getElementById('assigned_user_name').parentElement.previousElementSibling.appendChild(required_switch);
let msg = document.getElementById('assigned_user_name').parentElement.previousElementSibling.innerHTML.split(':')[0];
removeFromValidate(name_form,'assigned_user_id');
addToValidate(name_form,'assigned_user_id','varchar',true,msg);

Running the code on Console does work for me too.
Here is what i have done.

  1. Added custom file validate.js into editviewdefs.php of Tasks module

  2. In validate.js when task type change, addToValidate custom field.

     $(document).ready(function() {
          $("#task_type").on('change', function(){
           if($(this).val() == 'Transfer')
            {  
                 addToValidate('EditView', 'custom_field_id', 'varchar', true, 'Missing required field.');
             }
            else{
                       removeFromValidate('EditView',  'custom_field_id'); 
              }
       });
     });

@cherub-chum
I think that your code should be a little other:

  $(document).ready(function() {
    $("#task_type").on('change', function(){
       if($(this).val() == 'Transfer')
        {
              removeFromValidate('EditView',  'custom_field_id'); 
              addToValidate('EditView', 'custom_field_id', 'varchar', true, 'Missing required field.');
         }
        else{
              removeFromValidate('EditView',  'custom_field_id'); 
              addToValidate('EditView', 'custom_field_id', 'varchar', false, 'Missing required field.');
          }
    });
 });

Attention the fourth parameter of ā€œaddToValidateā€ function.

Yes used that logic too. The issue is that there is already one Core Script that is loaded in the Edit view for the Not Required Field.

addToValidate(ā€˜EditViewā€™, ā€˜custom_field_idā€™, ā€˜varcharā€™, false, ā€˜Missing required field.ā€™);

If you inspect Edit View there would be a block of addToValidate Statements. Those are core validations setup at the page load.
Adding the above code and then changing Task Type to Transfer does not adds the Custom field to Required as pressing SAVE button saves the record without asking for the custom required field.

@cherub-chum
I think that you miss the function:

removeFromValidate('EditView',  'custom_field_id');

You correctly write about ā€œblock of addToValidate Statementsā€. Before add new record you should remove old record. The function ā€œaddToValidateā€ can not change parameters it is only add but the function ā€œremoveFromValidateā€ remove old record. The validation for field need every time to call 2 functions the first ā€œremoveFromValidateā€ and the second ā€œaddToValidateā€.

I have added both conditions in the code block as you have mentioned.
By Default the fields are not required.
Looking at the addToValidate code block, it has a statement in the start

addForm(ā€˜EditViewā€™);

the function is defined as

      function addForm(formname) {
            validate[formname] = new Array();
       }

So since the custom JS is at the top (if you include js file via include method in editviewdefs.php) and this block is resetting the validate array, could this be nullifying custom JS validation ?

@cherub-chum
You use jQuery function:

$(document).ready(function() {

and you code is running after scrips on page.

I made full test. Itā€™s work!
Look at the codes below.

  1. file: custom/modules/Tasks/metadata/editviewdefs.php
...
'templateMeta' => array (
...
      'includes' = array(
          0 => array(
          'file' => 'modules/Tasks/valid.js',
          ),
       ),
...
),

modules/Tasks/valid.js

$(document).ready(function() {
    // control change filed: "description"
    $("#description").on('change', function(){
        // check data in "description" for valid in filed "parent_id"
        if($(this).val() !== ''){
            // make sumbol "*" for field "Related to"
            var required_switch = document.createElement('span');
            required_switch.className = 'required';
            required_switch.innerHTML = '*';
            document.getElementById('parent_name').parentElement.previousElementSibling.appendChild(required_switch);
            let msg = document.getElementById('parent_name').parentElement.previousElementSibling.innerHTML.split(':')[0];
            // remove old record about field "parent_id"
            removeFromValidate('EditView',  'parent_id'); 
            // switch on valid and new message for field "parent_id"
            addToValidate('EditView', 'parent_id', 'varchar', true, msg);
        }else{
            // remove sumbol "*" for field "Related to"
            let msg = document.getElementById('parent_name').parentElement.previousElementSibling.innerHTML.split(':')[0];
            document.getElementById('parent_name').parentElement.previousElementSibling.innerHTML = msg+':';
            // remove old record about field "parent_id"
            removeFromValidate('EditView',  'parent_id');
            // switch off valid and new message for field "parent_id"
            addToValidate('EditView', 'parent_id', 'varchar', false, msg);
        }
    });
});
1 Like

The issue was i was looping on the field required and passing extra ā€˜ā€™ in the addToValidate and removeFromValidate params . @p.konetskiy thank you for your time and effort.

were can we add the custom validate.js? I would like to use this logic on mobile validation

@waraikobuot

The solution also works in the mobile version.

no I mean, a validation for mobile length and format. Like I want to save the phone number with country code

@waraikobuot

You can write your js code and add it to array ā€œincludesā€ of the file ā€œcustom/modules/Tasks/metadata/editviewdefs.phpā€ .