WebGUI FAQ : WebGUI 7.0 Questions :
HOWTO: Javascript Form Validation of Required Fields
One way to fix this is to disable the new caching code in WebGUI - but a better way is to improve the form validation for non-webgui forms. I didn't know how to do this - so I taught myself enough javascript to get by, and I wrote a nice templated approach to this which I'm proud of, so thought I'd share it with you all. :)
What you need:
You'll need either a few javascript functions added to any javascript file you're including, or you'll want to add them to your page style.
function FieldRequired(ss) {
switch(ss.type)
{
case "radio": { return CheckRequired(ss); break; }
case "select-one": { return SelectionRequired(ss); break; }
case "text":
case "textarea": { return ContentRequired(ss); break; }
default:
{
if (ss[0].type == "radio")
return CheckRequired(ss);
break;
}
}
return true;
}function ContentRequired(ss) { if(ss.value.length > 0) { return false; } return true; }
function CheckRequired(ss) { for(var i = 0; i < ss.length; i++) {
if(ss[i].checked) { return false; }
}
return true;
}function SelectionRequired(ss) { for(var i = 0; i < ss.length; i++) {
if(ss[i].selected) {
if(ss[i].value.length) { return false; }
}
}
return true;
}The above routines all do the checking - FieldRequired() takes any form object and then determines whether it's a radio button, text object, select list, etc and checks it accordingly.
Now.. the cool bit - in your form template you need to add the following:
<SCRIPT language="JavaScript1.2"> function CheckRequiredFields() { var errormessage = new String(); // Put field checks below this point.
<tmpl_loop field_loop>
<tmpl_if field.isRequired>if(FieldRequired(document.bformmail.<tmpl_var field.name>)){ errormessage += "\n * <tmpl_var field.label> is a required field."; }</tmpl_if>
</tmpl_loop>
// Put field checks above this point.
if(errormessage.length > 2) {
alert('You still have required fields remaining:\n' + errormessage);
return false;
}
return true;
} // end of function CheckRequiredFields()
</SCRIPT>The above code uses templates to iterate through each field and if it's a required field then add javascript code to check it. If the field isn't filled in/checked/selected/etc then it adds it to a growing error message which lists all the fields not entered. If you're using the tab form object then you need to change the loop slightly:
<SCRIPT language="JavaScript1.2"> function CheckRequiredFields() { var errormessage = new String(); // Put field checks below this point.
<tmpl_loop tab_loop>
<tmpl_loop tab.field_loop>
<tmpl_if tab.field.isRequired>if(FieldRequired(document.bformmail.<tmpl_var tab.field.name>)){ errormessage += "\n * <tmpl_var tab.field.label> is a required field."; }</tmpl_if>
</tmpl_loop>
</tmpl_loop>
// Put field checks above this point.
if(errormessage.length > 2) {
alert('You still have required fields remaining:\n' + errormessage);
return false;
}
return true;
} // end of function CheckRequiredFields()
</SCRIPT>Now.. the final bit - and the most cruicial. In your <form action=xxx statement you need to add two things - one - a name (in my code above I assume the name is bformmail - but you can change this to whatever you want as long as it is unique), and secondly you need to add the onsubmit code to call the above javascript code.
<form name="bformmail" onSubmit="return CheckRequiredFields();" method="post" action="/cgi-bin/BFormMail.cgi">
Your method and action can differ, but if you use the above code as is, then the other two need to be the same. The onsubmit code is what sets it all off - it calls the template generated code which in turns calls those javascript routines to check the fields. The great thing about this is that it leverages the power of webgui and uses templates to do the work for you :)
Hopefully someone else can get some use out of this other than me. You could also extend this to do dynamic inserts into each form object and put images/text next to each required field that failed or something like that. I haven't gotten that far yet but it's something I'll probably look at in future. This could also be applied to regular webgui forms too if you really wanted, but there's not much point as they work pretty well as is.
Cheers,
Jesse
JesseATjugaDOTorg
What's supposed to be new in 7.0?