< Back

Document Subject: Field validation using javascript
Hint Short Cut: Add this to your code & documentation to help you find this page.
http://#JSFieldVal or http://A555F9/nn.nsf/ByAlias/JSFieldVal

Field validation on the browser! Nice bit of code that I use again and again.




Create a $$HTMLHead field which is text, computed when composed, and hidden to Notes and Web.

Put in this code:

"<script> function validate() {"+@newline+
" if (document.forms[0].TextField.value==\"\") { alert ('Enter Text Field!'); document.forms[0].TextField.focus(); return false}; " +@newline+
" if (document.forms[0].CheckField.checked == false ) { alert ('You have not checked the checkfield.'); return false}; " +@newline+
" if (document.forms[0].Option1.checked==false && document.forms[0].Option2.checked==false ) { alert ('Choose 1 or 2.'); return false}; "+
@newline+
" if (document.forms[0].SelectionField.selectedIndex == 0 ) {alert ('<none> selected in the pulldown!'); document.forms[0].SelectionField.focus(); document.forms[0].SelectionField.select(); return false};"+@newline+
" var email = document.forms[0].EmailField.value; domain = (email.substring(email.lastIndexOf('.'), email.length)).toLowerCase(); "+
@newline+
" if ( domain.length<3 || domain.length>4 || email.indexOf('@')==-1) { alert('Valid eMail address needed to continue.'); return false};"+
@newline+
"document.forms[0].submit(); return false; }; </script> "

Create some visible to web fields:

a text field called "TextField" that is editable

a keywords field that uses a checkbox and has one value "check this baby" called "CheckField" that is editable.

a keyword field that uses a checkbox and has one value "check this baby" called "Option1" that is editable.

a keyword field that uses a checkbox and has one value "check this baby" called "Option2" that is editable.

a keyword field that uses a dialog list and has formula values of "<none>":"apple":"pear" called "SelectionField" that is editable

and does not allow values not in this list.

a text field called "EmailField" that is editable

These buttons can be added to validate and submit the form:

<input type="button" value="Validate then Save " onclick="validate();">
<input type="button" value=" Save " onclick="document.forms[0].submit(); return false; ">
<input type="button" value="Don't send a message, just close the Window" onclick="window.parent.close(); return false;">

 

Adam Foster added 16 June 2006 because it is being used  again and again and keeps having to research it all the time....

To get the selected text value of  a dialog list field use:

f.<yourfield>.options[f.<yourfield>.selectedIndex].text

so this code shows an additional field if the option selected is other or many:

var f = document.forms[0];

var txt= f.PLApplicationArea.options[f.PLApplicationArea.selectedIndex].text;

 if ( txt.toLowerCase()=="other"   ) //other
 {
 document.getElementById('PLAppA2').style.display='';
 }  
else if ( txt.toLowerCase()=="many"  ) // many
 {
   document.getElementById('PLAppA2').style.display='';
  }  
else // neither
 {  
 document.getElementById('PLAppA2').style.display='none';
 }  

 Tip: surround the hidden field with div tags:

<div id='PLAppA2' <Computed Value> > extra field's caption and field </div>

where the computed value/text  is:

@If(
 @Contains( @LowerCase(PLApplicationArea) ; "other": "many");
 ""
  " style='DISPLAY:none' "

)