0

I'm new in JS and JQuery. Is there any way to call function from one file in another file like in Ruby?

I.e.

global_validation.js

$(document).ready(function() {
  var form = $('#vr-managed-form, #userRegistrationForm');

  if (form.length > 0) {
    var submit = form.find('input[type="submit"]');

    submit.click(function (evt) {
      evt.preventDefault();

      var invalidInput = $('input:invalid');

      if (invalidInput.length === 0) {
        form.submit();
      } else {
        invalidInput.addClass('invalid');
        validateRadios();
      }
    });

  function validateRadios() {
    var radio = $('input[type=radio]');
    var radioInvalid = $('input[type=radio]:invalid');
    var radioMsg = $('.radio-invalid-msg')

    if (radio) {
      if (radioInvalid.length > 0) {
        radioMsg.addClass('invalid');
      }

      radio.click(function () {
        if (radio.is(':checked')) {
          radio.removeClass('invalid');
          radioMsg.removeClass('invalid');
        } else if (radio.is(':not(:checked)')) {
          radio.addClass('invalid');
          radioMsg.addClass('invalid');
        }
      });
    }
  }
});

And I want to use this validateRadios() in other file. If I pack whole file in to new function like this:

function validateManager() {
  $(document).ready(function() {
    var form = $('#vr-managed-form, #userRegistrationForm');

  // and all logic from file global_validation.js
}

And when I'm trying to simply refer to this in a different file (like below) it won't worked.

create.js

$(document).ready(function () {
  var form = $('#userRegistrationForm');
  var submit = form.find('input[type="submit"]');


  submit.click(function(evt) {
    evt.preventDefault();

    $("#user-name").text(firstName + " " + lastName);

    if (invalidInput.length === 0) {
      form.submit();
    } else {
      invalidInput.addClass('invalid');
      validateManager();
    }
  });
mr_muscle
  • 2,536
  • 18
  • 61
  • 1
    Move the function declaration outside of `document.ready` so it has scope outside that handler function – charlietfl Jul 11 '19 at 11:22
  • You mean `function validateRadios()` should be outside of `document.ready` in `global_validation.js`? after that I should just refer to it in `create.js` by typing `validateRadios` instead of `validateManager()` like in above example? – mr_muscle Jul 11 '19 at 11:38
  • 1
    Yes...so it is in global window scope – charlietfl Jul 11 '19 at 11:40
  • I don't know if it will be safe because I have 12 other validations there which I will have to move either. If I change `function validateManager()` to `$(function validateManager() { $(document).ready(function() ... ` it will works but is it a good way to do so? – mr_muscle Jul 11 '19 at 11:47
  • And one more thing - if I declared this function outside of `document.ready` how to call it in `create.js` ? should I create variable below `submit.click` like `var validateRadios = validateRadios()` and in if condition replace `validateManager` by `validateRadios;` ? – mr_muscle Jul 11 '19 at 11:59
  • Functions don't need to have anything to do with document.ready. You will not be calling these before it is ready. – charlietfl Jul 11 '19 at 12:02
  • I'm doing something wrong or it just doesn't work. If I move all functions outside of `document.ready` and just call it in `if block` in `create.js` the validation doesn't work like before (it looks like html5 has taken over the validation) – mr_muscle Jul 11 '19 at 12:27
  • Any errors in console? And yes...must be doing something wrong – charlietfl Jul 11 '19 at 12:31
  • You were right, I had other error which was related with different validation, I fixed it quickly and now it works like before refactor! Thanks for your assist! – mr_muscle Jul 11 '19 at 14:09

1 Answers1

0

If the js file which has the function definition loaded before the js file which holds that function call, we cal call it asusual like above but not otherwise. you can refer this link

Priyanga
  • 143
  • 1
  • 3
  • 16