Jonathon Posted August 20, 2011 Share Posted August 20, 2011 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 Link to comment Share on other sites More sharing options...
HartleySan Posted August 22, 2011 Share Posted August 22, 2011 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. Link to comment Share on other sites More sharing options...
Jonathon Posted August 22, 2011 Author Share Posted August 22, 2011 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? Link to comment Share on other sites More sharing options...
HartleySan Posted August 22, 2011 Share Posted August 22, 2011 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. Link to comment Share on other sites More sharing options...
MichaelSpeds Posted September 27, 2017 Share Posted September 27, 2017 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 Link to comment Share on other sites More sharing options...
Recommended Posts