Improved Survey template so that bottom of page/submit button can be

skinned when questions don't validate. Added js to scroll page to
highest invalid question (e.g. lowest y-coord)
This commit is contained in:
Patrick Donelan 2009-04-28 00:37:51 +00:00
parent d7d10fff41
commit aa045b7abc
2 changed files with 39 additions and 6 deletions

View file

@ -5,8 +5,9 @@ if (typeof Survey === "undefined") {
(function(){
var CLASS_INVALID = 'survey-invalid'; // For elements that fail input validation
var CLASS_INVALID_MARKER = 'survey-invalid-marker'; // For default '*' invalid field marker
var INVALID_QUESTION_CLASS = 'survey-invalid'; // CSS class for questions that fail input validation
var INVALID_SUBMIT_CLASS = 'survey-submit-invalid'; // CSS class for submit div when questions don't validate
var INVALID_QUESTION_MARKER = 'survey-invalid-marker'; // For default '*' invalid field marker
// All specially-handled question types are listed here
// (anything else is assumed to be a multi-choice bundle)
@ -50,6 +51,7 @@ if (typeof Survey === "undefined") {
function formsubmit(event){
var submit = 1;//boolean for if all was good or not
var lowestInvalidY = 0;
for (var i in toValidate) {
if (YAHOO.lang.hasOwnProperty(toValidate, i)) {
var answered = 0;
@ -111,22 +113,36 @@ if (typeof Survey === "undefined") {
if (!answered) {
submit = 0;
// Apply CLASS_INVALID to the parent question div for people who want to skin Survey
YAHOO.util.Dom.addClass(q_parent_node, CLASS_INVALID);
// Apply INVALID_QUESTION_CLASS to the parent question div for people who want to skin Survey
YAHOO.util.Dom.addClass(q_parent_node, INVALID_QUESTION_CLASS);
// Insert default '*' marker (can be hidden via CSS for those who want something different)
node.innerHTML = "<span class='" + CLASS_INVALID_MARKER + "'>*</span>";
node.innerHTML = "<span class='" + INVALID_QUESTION_MARKER + "'>*</span>";
// Keep track of the lowest y-coord invalid question (to scroll to)
var qY = YAHOO.util.Dom.getY(q_parent_node);
lowestInvalidY = lowestInvalidY && lowestInvalidY < qY ? lowestInvalidY : qY;
}
else {
YAHOO.util.Dom.removeClass(q_parent_node, CLASS_INVALID);
YAHOO.util.Dom.removeClass(q_parent_node, INVALID_QUESTION_CLASS);
node.innerHTML = '';
}
}
}
var submitButton = document.getElementById('submitbutton');
var submitDiv = submitButton && YAHOO.util.Dom.getAncestorByTagName(submitButton, 'div');
if (submit) {
submitDiv && YAHOO.util.Dom.removeClass(submitDiv, INVALID_SUBMIT_CLASS);
YAHOO.log("Submitting");
Survey.Comm.callServer('', 'submitQuestions', 'surveyForm', hasFile);
}
else {
submitDiv && YAHOO.util.Dom.addClass(submitDiv, INVALID_SUBMIT_CLASS);
// Scroll page to the y-coord of the lowest invalid question
lowestInvalidY && scrollPage(lowestInvalidY, 1.5, YAHOO.util.Easing.easeOut);
}
}
function goBack(event){
@ -134,6 +150,23 @@ if (typeof Survey === "undefined") {
Survey.Comm.callServer('', 'goBack');
}
function scrollPage(to, dur, ease) {
var setAttr = function(a, v, u) {
window.scroll(0, v);
};
var anim = new YAHOO.util.Anim(null,
{ 'scroll' : {
from : YAHOO.util.Dom.getDocumentScrollTop(),
to : to }
},
dur, ease
);
anim.setAttribute = setAttr;
anim.animate();
}
function numberHandler(event, objs){
var keycode = event.keyCode;