Add dynamic javascript variables to script

Question

Background: I have a jQuery validation script, which is used on almost all my webpages, allowing for client-side validation (I also do server-side validation). The javascript is the same for all my pages, except for the specific 'rules' for each form.

The rules for each page are inserted into a php variable $jquery_validation from my controllers prior to rendering the HTML page. This means I can dynamically generate each html page & form, with the appropriate client-side validation rules.

Below is my javascript code that is currently loaded on ALL my html pages:

$(document).ready(function(){
      $('#signupform').validate({
           wrapper: 'span class="error"',
           meta: 'validate', 
           highlight: function(element, errorClass, validClass) {
               if (element.type === 'radio') {
                      this.findByName(element.name).addClass(errorClass).removeClass(validClass);
              } else {
                      $(element).addClass(errorClass).removeClass(validClass);
               }

              var error = $(element).parent().find('span.error');       
                error.show();     
            },

             unhighlight: function(element, errorClass, validClass) {
              if (element.type === 'radio') {
                this.findByName(element.name).removeClass(errorClass).addClass(validClass);
              } else {
                $(element).removeClass(errorClass).addClass(validClass);
              }

              $(element).parent().find('span.error').hide(0, function() {
                $(element).parent().find('span.valid').fadeIn(200);
              });
            },
            <?=$jquery_validation?>);});

</script>

the $jquery_validation variable at the end contains the "rules" for each page, which are obviously different depending on the form. An example of the output it gives is:

 "rules":{"username":{"required":true,"remote":{"url":"http:\/\/localhost\/mytest\/public_html\/welcome\/remote","type":"post"}},"onkeyup":false});});

The function is working now, and all is good.

Question: Is there a way to have my validation javascript function in my .js file (so it can be compressed etc) - and still dynamically load the "rules" section of the validation for each page?

I can change the 'output' & syntax of the $jquery_validation if required - but the point is I need to be able to output the rules for each page dynamically

you could create a php file, tell "This is a Javascript" using headers. With this aproach, you could even store the validation values on a database. — chepe263
– chepe263, Commented Apr 17, 2012 at 5:39

dfsq · Accepted Answer · 2012-04-17 05:45:20Z

2

Or you could do somthing like this:

var _pageValidationRules = <?php echo $jquery_validation; ?>

// Code below can be compressed
$(function() {
    $('#signupform').validate({
        wrapper: 'span class="error"',
        meta: 'validate',
        highlight: function(element, errorClass, validClass) {
            // ...
        },
        unhighlight: function(element, errorClass, validClass) {
            // ...
        }
        rules: _pageValidationRules
    });
});

answered Apr 17, 2012 at 5:45

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Maksym Kozlenko Over a year ago

I would move validation rules to external file to reduce HTML file size

Laurence Over a year ago

ok - so to clarify - your saying 'compress' my java code, but leave it in my html file, rather than having it in a .js file separately?

dfsq Over a year ago

You can leave code in html, or you can move into separate js file. It doesn't matter. Just make sure there is _pageValidationRules variable available in a global context so that when your validation plugin is initialized it could make use of your rules.

Steven Over a year ago

The only issue I have with this is that it's unclear what is actually acting on those values.

Steven · Accepted Answer · 2012-04-17 05:45:45Z

1

Yes, you can create an object and save it off to a variable and save off the details in the constructor (can't remember what it's called in JS).

Here is an example I use in one of my scripts.

var rmlsSearch = function(searchEndpoint) {

  this.fname = '';
  this.lname = '';
  this.searchEndpoint = searchEndpoint;
  this.resultTemplate = $('#rmls-search-result-template').html();

  //Preform inital search
  this.searchAgent();

  //Bind search function to search button
  $('#rmls-search-button').one('click', $.proxy(this.searchAgent, this));

};

With that defined you can then instantiate it wherever you want and pass in whatever details you need.

var rmlsHandle = rmlsSearch("some endpoint I'm planning on using");

The search Agent function, prototyped into the object:

rmlsSearch.prototype.searchAgent = function(){

  //Get the agent details from the form on the page
  this.getAgentDetails();

  //... Whatever else you'd need to do in the function
};

edited Apr 17, 2012 at 5:45

answered Apr 17, 2012 at 5:40

Steven

1,1171 gold badge8 silver badges21 bronze badges

2 Comments

Laurence Over a year ago

Hmmm... I think I understand - make a static JS function in my .js file, which accepts a variable - and then call that JS function from my HMTL code, passing the rules? interesting... I'll look into that now...

Steven Over a year ago

Yeah, it's the simplest/cleanest way I've found to reuse blocks of JS where I need to pass in config vars. Let me know if I can clarify any part of it for you.

the_red_baron · Accepted Answer · 2012-04-17 05:42:43Z

1

PHP needs to be rendered by the browser in order for it to execute dynamic content. Thus, trying to put PHP in an external js file won't be read.

answered Apr 17, 2012 at 5:42

the_red_baron

8887 silver badges14 bronze badges

1 Comment

Laurence Over a year ago

yes - thats my point - how can I achieve the best of both worlds (my javascript in the .js file, whilst still having variables loaded from the html file)

jfriend00 · Accepted Answer · 2012-04-17 05:49:52Z

1

You can put javascript code in any .js file and let it be compressed and it can operate on the data in the HTML page. The two do not have be in the same file. If your code executes when it loads, you just need to make sure it first runs after the code has been defined in the page, either by locating it physically after the code comes in the page or by waiting for the page to load before executing the code.

edited Apr 17, 2012 at 5:49

answered Apr 17, 2012 at 5:39

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

2 Comments

Laurence Over a year ago

thanks jfriend00 - but how do I actually do that? How do I get the js code to operate on the data on the html page?

jfriend00 Over a year ago

You move the rules out of the function and into a global variable that you can refer to from your validation function. Then the validation function can be in your compressed JS.

Maksym Kozlenko · Accepted Answer · 2012-04-17 05:58:50Z

1

Create a PHP script which will return validation rules in JSON format.
Load that script using script tag, it could be PHP file (to imptove performance set correct HTTP caching settings, so it will stay in browser cache)
Load validation logic from external JS static file

answered Apr 17, 2012 at 5:58

Maksym Kozlenko

10.4k2 gold badges69 silver badges55 bronze badges

2 Comments

Laurence Over a year ago

thanks Maksym - thats what I want to do - but how do I actually do that? i.e. I know how to put my logic into a JS Static file, but how do I tell that function to look in the html file to actually dynamically load the rules?

Maksym Kozlenko Over a year ago

You can load external JavaScript file and execute it dynamically using jQuery's getScript method - api.jquery.com/jQuery.getScript

Collectives™ on Stack Overflow

Add dynamic javascript variables to script

5 Answers 5

4 Comments

2 Comments

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related