Validating Coldfusion with Jquery by Global Variable Access

Garbonzo_Horowitz
Garbonzo_Horowitz used Ask the Experts™
on
How to access a global variable within a javascript .each() function? Yes, I know this is bad practice but I still need to do it. I'm creating a form with dynamic form input fields. I'm iterating through those fields and if the value is zero or an empty space I want to form validation to let the user know they need to enter a number.  But when I try to edit the global variable or modify a form field value I'm not able to do that. I'm using jquery to do this. Can anybody offer a way validate this form without a plugin? Attached is my code. I'm using cold fusion and jquery as the base language.
EE_simpleJqueryValidation.txt
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2015
Commented:
I don't think a global variable is neccessary.  Just move the variable declaration inside the submit()  event code - and the event.preventDefault();

While yes/no works, use true/false instead for easier use (and console.log over alert).


    $( document ).ready(function() {
		
		$( "#frmCart" ).submit(function( event ) {
			event.preventDefault();
			var isFormValid = true; 

			$('input[id^="mycart"]').each(function(index, item){
				var theval = $(item).val();
				var theid = $(item).attr('id');
				console.log(theval + ' ' + theid);

				if (theval == 0 || theval === "") {
					isFormValid = false;
				}
			});
			
			console.log("isFormValid ="+ isFormValid);
			return isFormValid;		
		});
	

    });

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Why are you doing an event.preventDefault(); on document load - makes no sense - event is not defined and nothing to prevent at this stage?

Then, why are you prefixing isFormValid with window - just use the variable name.

Second are you using the required attribute on the input fields?

If you require additional validation I would put a class on the fields that need to be validated - that way you can easily find the ones you need to validate

var validate = $('.validate');

Open in new window


You could then filter this array and run your validation.

NB: You can achieve the same thing using the 'required' attribute on the form fields that have to have a value - this is a preferable solution.

Here is how to do it if you want to do it yourself
HTML
<form>
  <input type="text" name="firstname" class="validate">
  <input type="text" name="lastname">
  <input type="text" name="email" class="validate">
  <input type="submit">
</form>

Open in new window

jQuery
$(function() {
  $('form').submit(function(e) {
    var validate = $('.validate');
    var errors = validate.filter(function(i,a) {
      if (!a.value) return a;

      return false;
    });

    if (errors.length) {
      e.preventDefault();
      alert("Errors");
    }
  });
});

Open in new window

Most Valuable Expert 2015

Commented:
Yeah, I'd go with Julian's answer. It's better than mine.

Author

Commented:
Thank you both for your response. I really appreciate it. I was able to resolve it with _agx_ example. Bringing the isFormValid var into the for-each block worked just fine.

@Julian Hansen -

Why are you doing an event.preventDefault(); on document load - makes no sense - event is not defined and nothing to prevent at this stage?  A: I was just using it while testing to prevent the form from submitting. I didn't even need it because it was replaced by "return false".

Then, why are you prefixing isFormValid with window - just use the variable name. A: Again just testing if that made any difference in declaring a global variable. I couldn't access any variable when in the for-each loop.

Second are you using the required attribute on the input fields? A: No I was not.

If you require additional validation I would put a class on the fields that need to be validated - that way you can easily find the ones you need to validate.  A: This is a good suggestion and I will look into more complex validation methods.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
I was just using it while testing to prevent the form from submitting. I didn't even need it because it was replaced by "return false".
That wasn't the question. You have
<script>
    $( document ).ready(function() {
		event.preventDefault(); // <==== This makes no sense

Open in new window

Again just testing if that made any difference in declaring a global variable. I couldn't access any variable when in the for-each loop
Again makes no sense - that variable is accessible within the loop.
Second are you using the required attribute on the input fields? A: No I was not.
It was more of a recommendation than a question - you don't need JavaScript to test required fields - that is precisely what the required attribute is for.
This is a good suggestion and I will look into more complex validation methods.
That is not a more complex validation method - it was suggested because it is a far simpler method than the way you were doing it - take a look again at my example.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial