CICS 515 a Internet Programming Week 4 Mike Feeley
JavaScript continued ...
Validators JavaScript to check validity of user input • report errors to user without going to server • so that user can fix them quickly and easily http://ws.cs.ubc.ca/~feeley/cics515/code/week4/validator/foo.html • lets say that first field can only have value ‘zero’ and second ‘one’ • connect JavaScript event handler to input’s onblur event (or maybe onchange) <html> <head> </head> <body onload='whenLoaded()'> <form onsubmit='javascript: return this.isSubmitOkay ()'> <table> <tr> <td><input type='text' size='20' onblur='validate()'></td> </tr> <tr> <td><input type='text' size='20' onblur='validate()'></td> </tr> </table> <input type='submit' value='submit'> </form> </body> </html>
giving error feedback to user • immediate responsiveness, don’t wait for submit to indicate errors • “modal” (fix error before continuing) or not (allow multiple inputs before fixing errors) • clearly indicate fields in error and what is wrong • consistent across fields, forms and pages http://ws.cs.ubc.ca/~feeley/cics515/code/week4/foo.html pick standard for assigning field IDs • x_eFlag is the element that is highlighted when there’s an error in input x • x_eMsg is the element where error message is displayed <td id='i0_eFlag'><input id='i0' type='text' size='20' onblur='validate()'></td> <td id='i0_eMsg' class='ErrorMessage'></td> <td id='i1_eFlag'><input id='i1' type='text' size='20' onblur='validate()'></td> <td id='i1_eMsg' class='ErrorMessage'></td> use style sheet for highlighting *.InputError { background-color: red; } *.InputOkay { background-color: white; }
JavaScript to set/clear an error on a field var ERROR_FLAG_SUFFIX = '_eFlag'; var ERROR_MSG_SUFFIX = '_eMsg'; function setError () { document.getElementById(this.eFlagID()).className = INPUT_ERROR_CLASS; document.getElementById(this.eMsgID()).innerHTML = this.errMsg; } function clearError () { document.getElementById(this.eFlagID()).className = INPUT_OKAY_CLASS; document.getElementById(this.eMsgID()).innerHTML = ''; } but, we’ll do it in object-oriented fashion • extend the DOM Input object to add these new properties setError () highlights field and sets its error message clearError () unhilights field and clears its error message validate () calld by onblur event to check field’s validity isValid () returns true if and only if current value of field is valid errMsg error message to display if field is in error hasError true if and only if current value of field is invalid
extending the Input prototype in JavaScript HTMLInputElement.prototype.setError = function () { this.hasError = true; document.getElementById(this.eFlagID()).className = INPUT_ERROR_CLASS; document.getElementById(this.eMsgID()).innerHTML = this.errMsg; this.form.disableSubmit (true); } HTMLInputElement.prototype.clearError = function () { this.hasError = false; document.getElementById(this.eFlagID()).className = INPUT_OKAY_CLASS; document.getElementById(this.eMsgID()).innerHTML = ''; if (this.form.isSubmitOkay()) this.form.disableSubmit (false); } HTMLInputElement.prototype.validate = function () { if (this.isValid ()) this.clearError (); else this.setError (); } set isValid and errMsg for inputs in page’s onload hander function whenLoaded () { document.getElementById('i0').isValid = function () { return this.value=='zero'; }; document.getElementById('i0').errMsg = 'must be "zero"'; document.getElementById('i1').isValid = function () { return this.value=='one'; }; document.getElementById('i1').errMsg = 'must be "one"'; }
disable submitting if there is an error HTMLFormElement.prototype.disableSubmit = function (disable) { for (var i=0; i<this.elements.length; i++) if (this.elements[i].type=='submit') this.elements[i].disabled=disable; } HTMLFormElement.prototype.isSubmitOkay = function () { for (var i=0; i<this.elements.length; i++) if (this.elements[i].hasError) return false; return true; } <body onload='whenLoaded()'> <form onsubmit='javascript: return this.isSubmitOkay ()'>
Putting it all together <html> <head> <link href='Project.css' rel='stylesheet' type='text/css'> <script src='ValidateInput.js' language='JavaScript' ></script> <script type='text/JavaScript'> function whenLoaded () { document.getElementById('i0').isValid = function () { return this.value=='zero'; }; document.getElementById('i0').errMsg = 'must be "zero"'; document.getElementById('i1').isValid = function () { return this.value=='one'; }; document.getElementById('i1').errMsg = 'must be "one"'; } </script> </head> <body onload='whenLoaded()'> <form onsubmit='javascript: return this.isSubmitOkay ()'> <table> <tr> <td id='i0_eFlag'><input id='i0' type='text' size='20' onblur='validate()'></td> <td id='i0_eMsg' class='ErrorMessage'></td> </tr> <tr> <td id='i1_eFlag'><input id='i1' type='text' size='20' onblur='validate()'></td> <td id='i1_eMsg' class='ErrorMessage'></td> </tr> </table> <input type='submit' value='submit'> </form> </body> </html>
var INPUT_ERROR_CLASS = 'InputError'; var INPUT_OKAY_CLASS = 'InputOkay'; var ERROR_FLAG_SUFFIX = '_eFlag'; var ERROR_MSG_SUFFIX = '_eMsg'; HTMLFormElement.prototype.disableSubmit = function (disable) { for (var i=0; i<this.elements.length; i++) if (this.elements[i].type=='submit') this.elements[i].disabled=disable; } HTMLFormElement.prototype.isSubmitOkay = function () { for (var i=0; i<this.elements.length; i++) if (this.elements[i].hasError) return false; return true; } HTMLInputElement.prototype.eFlagID = function () { return this.id+ERROR_FLAG_SUFFIX; } HTMLInputElement.prototype.eMsgID = function () { return this.id+ERROR_MSG_SUFFIX; } HTMLInputElement.prototype.setError = function () { this.hasError = true; document.getElementById(this.eFlagID()).className = INPUT_ERROR_CLASS; document.getElementById(this.eMsgID()).innerHTML = this.errMsg; this.form.disableSubmit (true); } HTMLInputElement.prototype.clearError = function () { this.hasError = false; document.getElementById(this.eFlagID()).className = INPUT_OKAY_CLASS; document.getElementById(this.eMsgID()).innerHTML = ''; if (this.form.isSubmitOkay()) this.form.disableSubmit (false); } HTMLInputElement.prototype.validate = function () { if (this.isValid ()) this.clearError (); else this.setError (); }
Combining JavaScript with PHP and MySQL http://ws.cs.ubc.ca/~feeley/cics515/code/week4/enterStudents6.php
Your turn ... add country to this form • assume country must be country in North America • not as a drop-down box, why? http://ws.cs.ubc.ca/~feeley/cics515/code/week4/enterStudents7.php
Checking for valid country code var isValidCountry = function () { return (!this.value || (this.value=='Canada' || this.value=='United States' || this.value=='Mexico')); }; var errMsgCountry = 'country in North America (property capitalized)'; echo "<script type='text/JavaScript'>\n"; echo "function loadCountryValidators () {\n"; for ($i=0; $i<mysql_numrows($rows); $i++) { echo "document.getElementById('country$i').isValid = isValidCountry;\n"; echo "document.getElementById('country$i').errMsg = errMsgCountry;\n"; } echo "}\n</script>\n"; echo "<td><table><tr><td id='country${i}_eFlag'> <input id='country$i' name='country[]' type='text' size='30’ value='$country' "; echo "onchange='checkBox($i)' onblur='validate()'></td></tr> <tr><td id='country${i}_eMsg' class='ErrorMessage'> </td></tr> </table>\n";
Modular design in HTML / JavaScript separation of concerns is important • style elements in the style file - so that site can define a consistent look and feel and that it can be easily changed • form validation defined at the class level - so that every input field is validated in a consistent manner with minimal form-specific work • error flagging and message at least semi-independent from style and HTML but what we have so far is not really good enough • the problem is that HTML still encodes some formatting (table, rows, cells etc.) • no connection to underlying data types in database - validation and formatting should be properties of the data’s schema - but how ...
XML
Recommend
More recommend
