Jump to content



Photo

Complete Form Validation


  • Please log in to reply
4 replies to this topic

#1 Jonathon

Jonathon

    Advanced Member

  • Members
  • PipPipPip
  • 1070 posts

Posted 20 August 2011 - 9:51 AM

I'm just thinking of the logic behind a complete Ajax form validation. And wanted some advice, this will be pure JS and not JQuery. My concerns are 2 fold really, what's the most efficient way to write this code? For instance: This is the general code that I have seen used in Larry's books

		if (ajax) {
			if (document.getElementById('results_title')) {
				document.getElementById('individual-listing').onchange = function() {
					var title = document.getElementById('title').value;
					ajax.open('get', 'individual-listing-ajax.php?title=' + encodeURIComponent(title));
					ajax.onreadystatechange = function() {
						handleResponse(ajax);
					}
					ajax.send(null);
					return false;
				}// End of anonymous function
			} // Emd of DOM check
		} // End of ajax if
}// End of init() function

function handleResponse(ajax) {
	if (ajax.readyState != 4) {
		var results = document.getElementById('results_title');
		results.innerHTML = '<img src="images/spinner.gif" />';
		results.style.display = 'inline';
	} else {
		if ((ajax.status == 200) || (ajax.status == 304)) {
			var results = document.getElementById('results_title');
			results.innerHTML = ajax.responseText;
			results.style.display = 'inline';
		} else {
			document.getElementById('individual-listing').submit();
		}
	}
}



This simply checks the input of a title field and returns a tick or cross to state whether the field has an acceptable value. But when you want to do this across multiple fields what is the most efficient way?? Using a for loop in the .js file? My problem is slightly different to Larry's because what I want to do is validate each field and place an image next to indicate its success rather than place all the errors into 1 <div>

Secondly, the form at some point does need to be posted to a database, I was a little unsure of how to then make the form actually submit as I'm using the $_GET variable to check that the inputs are ok. The example I based this code on was just the browsing employees section of the Ajax book.

Thanks in advance

Jonathon
  • 0

#2 HartleySan

HartleySan

    Advanced Member

  • Members
  • PipPipPip
  • 3042 posts
  • LocationColumbus, OH USA

Posted 21 August 2011 - 7:37 PM

If you're using Ajax to submit data to be placed in a database, you'll want to use the onsubmit event and the post method.

On a small side note, it might be more practical (and easier) to have the spinner image be placed on the screen as soon as the onchange event fires for each field, as opposed to testing the status of the Ajax request. Also, if you're attaching the onchange event to each field in a form, you really don't need to worry about a for loop, etc., as all the requests should be handled asynchronously. If you're worried about overlap, maybe create two different Ajax objects, so that they can work together at the same time.

Also, some small syntactical issues, but something.onchange = function () { } should end with a semicolon, as it is essentially an assignment operation. Also, it's better to use === and !== than == and !=. Larry never talks about these things, but no offense to Larry, I don't think he's exactly a JS guru. I think his specialty lies in PHP and MySQL.

Lastly, more a matter of preference, but for text fields, I think firing a confirmation event when the field is focused away from (i.e., onblur) is more practical (and less taxing on the DB) than using onchange. onchange is good for select fields, etc., though.
  • 0

#3 Jonathon

Jonathon

    Advanced Member

  • Members
  • PipPipPip
  • 1070 posts

Posted 21 August 2011 - 7:47 PM

Thanks,

I get that I need use post to submit the data, but do you need to use 'get'to check the validity of each form input?That's what I was confused on?I thought I would need to as yes I'm posting the data eventually but I need to check that each input is valid so assumed that I should use a 'get' for these?
  • 0

#4 HartleySan

HartleySan

    Advanced Member

  • Members
  • PipPipPip
  • 3042 posts
  • LocationColumbus, OH USA

Posted 21 August 2011 - 10:35 PM

Yes, get is fine. In general, when you're only referencing data, but not modifying it, you use get.

Also, you may want to consider alternatives that won't strain the server as much. For example, when the page with the form loads, you might want to grab all the names from the D (if there aren't that many), and place them in an array on the JS side to be used for validation. That would definitely save on server calls, as only one would have to be made at the beginning.
  • 0

#5 MichaelSpeds

MichaelSpeds

    Newbie

  • Members
  • Pip
  • 4 posts

Posted 27 September 2017 - 5:07 PM

Hi, right now, a lot of problems are caused when people use certain characters in form fields like work title. this includes things like ampersands and
  • 0