asked on

Using jQuery Validation Plugin - getting "Uncaught TypeError: Cannot read property 'form' of undefined"

Using jQuery Validation Plugin.

var html = '<form id="newJobForm" class="well job-form-extra">';
$.each( data, function( i, item ) {		
	if(item.type == "text") {		
		html += '<label for="'+item.id+'"></label><input placeholder="'+item.title+'" type="text" id="'+item.id+'" name="'+item.id+'" '+(/\bpobid/gi.test(item.title) ? ' required="required"' : '')+'><br />';
		if(/\bpobid/gi.test(item.title)) $("[name='"+item.id+"']").rules("add", {required: true});
	}	
}
html += '</form>';
$(html)
        .hide()
        .css('opacity',0.0)
        .appendTo('#trigger-header')
        .slideDown('fast')
        .animate({opacity: 1.0})
$("#newJobForm").validate();

Open in new window

From this I get:
Uncaught TypeError: Cannot read property 'form' of undefined

It happens with this line:
$("[name='"+item.id+"']").rules("add", {required: true});

Pierre Cornelius

Still looking, but found this problem so far:

Your $.each(...
is missing the closing );

what is data? you are not defining/declaring it

itnifl

ASKER

You are right. I was a bit fast when I took out the code I thought was relevant. Here is the whole function.

Data is a response from a node API that represents data elements in a Orhestrator run book step.

function InsertForm(data,rid) {
	//console.log(data)
	
	var html = '<form id="newJobForm" class="well job-form-extra"><span class="help-block">Help Text</span>';

	$.each( data, function( i, item ) {		
		if(item.type == "text") {		
			html += '<label for="'+item.id+'"></label><input placeholder="'+item.title+'" type="text" id="'+item.id+'" name="'+item.id+'" required="required"><br />';
			if(/\bpobid/gi.test(item.title)) $("[name='"+item.id+"']").rules("add", {required: true}, messages: {required: "Required input"});
		}
		
		if(item.type == "_username") {
			html += '<input value="__username" type="hidden" id="'+item.id+'" name="'+item.id+'">';
		}
		
		if(item.type == "_email") {
			html += '<input value="__email" type="hidden" id="'+item.id+'" name="'+item.id+'">';
		}
		
		if(item.type == "dropdown") {
			html += '<label>'+item.selectinfo+'</label>';
			html += '<select class="styled-select" name="'+item.id+'">';
			var a = item.title.split(',');
			for (var i = 0; i < a.length; i++) {
				html += '<option value="'+a[i]+'">'+a[i]+'</option>';
			}
			html += '</select><br />';
		}		
    });
	
	html += '<a class="btn btn-primary" href="javascript: submitform(\''+rid+'\')">Start</a>';
	html += '</form>';	
	
	$(html)
        .hide()
        .css('opacity',0.0)
        .appendTo('#trigger-header')
        .slideDown('fast')
        .animate({opacity: 1.0})
    $("#newJobForm").validate();
}

Open in new window

Pierre Cornelius

Change

if(/\bpobid/gi.test(item.title)) $("[name='"+item.id+"']").rules("add", {required: true}, messages: {required: "Required input"});

Open in new window

if(/\bpobid/gi.test(item.title)) $("[name='"+item.id+"']").rules("add", {required: true, messages: {required: "Required input"}});

Open in new window

itnifl

ASKER

Good spotted, but same error still :p

Pierre Cornelius

this works on my side:

<!DOCTYPE HTML>
<html>
<head>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js" type="text/javascript"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
</head>
<body>
	<div id="trigger-header"></div>
	
	<script type="text/javascript">
	function InsertForm(data,rid) {
		//console.log(data)
		
		var html = '<form id="newJobForm" class="well job-form-extra"><span class="help-block">Help Text</span>';

		$.each( data, function( i, item ) {		
			if(item.type == "text") {		
				html += '<label for="'+item.id+'"></label><input placeholder="'+item.title+'" type="text" id="'+item.id+'" name="'+item.id+'" required="required"><br />';
				//if(/\bpobid/gi.test(item.title)) $("[name='"+item.id+"']").rules("add", {required: true}, messages: {required: "Required input"});
				if(/\bpobid/gi.test(item.title)) $("[name='"+item.id+"']").rules("add", {required: true, messages: {required: "Required input"}});
			}
			
			if(item.type == "_username") {
				html += '<input value="__username" type="hidden" id="'+item.id+'" name="'+item.id+'">';
			}
			
			if(item.type == "_email") {
				html += '<input value="__email" type="hidden" id="'+item.id+'" name="'+item.id+'">';
			}
			
			if(item.type == "dropdown") {
				html += '<label>'+item.selectinfo+'</label>';
				html += '<select class="styled-select" name="'+item.id+'">';
				var a = item.title.split(',');
				for (var i = 0; i < a.length; i++) {
					html += '<option value="'+a[i]+'">'+a[i]+'</option>';
				}
				html += '</select><br />';
			}		
		});
		
		html += '<a class="btn btn-primary" href="javascript: submitform(\''+rid+'\')">Start</a>';
		html += '</form>';	
		
		$(html)
			.hide()
			.css('opacity',0.0)
			.appendTo('#trigger-header')
			.slideDown('fast')
			.animate({opacity: 1.0})
		$("#newJobForm").validate();
	}
												
	
	
		
		var TestData = [{id:"name_first", title:"enter your first name", type:"text"}
					,{id:"name_last", title:"enter your last name", type:"text"}
					,{id:"mobile", title:"enter your mobile", type:"text"}
					,{id:"age", title:"enter your age", type:"text"}
					];
		InsertForm(TestData, 'newJobForm');
	</script>
</body>
</html>

Open in new window

Pierre Cornelius

Do you get the error when loading the page? or when clicking the "Start" link?

Can you post your submitform code?

itnifl

ASKER

I get the error when I load the page, however I can see that you are not getting it. I tried your code in a html file locally.

function submitform(r) {
	var loadinghtml = '<div id="loading"><img src="/global/loading.gif"/>laster...</div>';
	var f = $('#newJobForm').serializeArray();
//I have this going on here to validate the input since I am not getting the jQuery Validation Plugin to work.
	var notComplete = false;
	for(var x = 0; x < f.length; x++) {
		if(!f[x].value) {
			$("label[for='"+f[x].name+"']").text('* This field is required..').css('font-weight','bold').css('color','red');
			notComplete = true;
		}
	}
	if(notComplete) return false;
	$('#newJobForm').fadeOut('fast');
	
	$(loadinghtml)
        .hide()
        .css('opacity',0.0)
        .appendTo('#trigger-header')
        .slideDown('fast')
        .animate({opacity: 1.0})

	var ADSSapi = _ADSSapi + 'orchestrator/order.php?r='+r+'';

	$.ajax({
		type: "POST",
		url: ADSSapi,
		data:  f
	}).done(function( msg ) {
		var d = jQuery.parseJSON(msg);				
		if(d.status == "Pending") {
			$('#newJobForm').remove();
			$('#loading').fadeOut('fast').remove();
			
			var completehtml = '<blockquote><p>Job is sent to orchetrator.</p> <small">ID: '+d.id+'</small></blockquote>';
			
			$(completehtml)
				.hide()
				.css('opacity',0.0)
				.appendTo('#trigger-header')
				.slideDown('fast')
				.animate({opacity: 1.0})			
		} else {
			$('#loading').fadeOut('fast').remove();
			$('#newJobForm').fadeIn('fast');
		}
	});
}

Open in new window

ASKER CERTIFIED SOLUTION

Pierre Cornelius

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

itnifl

ASKER

I am sorry. I cannot. I will have to look further into this myself. Thank you so far.

Using jQuery Validation Plugin - getting &quot;Uncaught TypeError: Cannot read property 'form' of undefined&quot;

Using jQuery Validation Plugin - getting "Uncaught TypeError: Cannot read property 'form' of undefined"