How to make mandatory fields work

Hello to Everybody,

I need some help to get my form working with mandatory fields... I cant seem to get it to work. Can you please help me?

When you click on submit it just submits the form without validation.

Here is the URL maybe you can have a glimpse of the page and give me some advice

http://gfnc-sydney.org/index.php?option=com_chronocontact&chronoformname=Registration&Itemid=64

Thank you.

Regards,
Francis

I do not have the answer - but would like also to see a demo of this. Hint - Include it in the forthcoming Tutorial.

Hi all,

You will have to write the validation code with javascript yourself, and insert it into the javascript box, the form won't create this automatically.

Cheers

Max

Thank you the info...

Would you have a sample? as I am new to this.
Thanks in advance.

Regards,
Francis

I made this in dreamweaver... I dont know what I am doing wrong... Can you please assist.

<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
}
//-->
</script>

hi,

This will change based on your elements and the validation rules you choosed, anyway you can put this code without he script tags inside the script field, and at the form tag attachment write : onsubmit="return MM_validateForm()"

and hopefully it will work, however javascript issues are tricky and as you are new it may not work😟

good luck!

Max

I changed the Javascript to this ans followed your other instructions... But no luck... any other ideas to solve this issue?

function validateForm() {
with (document.Registration) {
var alertMsg = "The following REQUIRED fields\nhave been left empty:\n";
if (FirstName.value == "") alertMsg += "\nFirstName";
if (Surname.value == "") alertMsg += "\nSurname";
if (Address.value == "") alertMsg += "\nAddress";
if (City.value == "") alertMsg += "\nCity";
if (State.value == "") alertMsg += "\nState";
if (Country.value == "") alertMsg += "\nCountry";
if (Email.value == "") alertMsg += "\nEmail";
if (alertMsg != "The following REQUIRED fields\nhave been left empty:\n") {
alert(alertMsg);
return false;
} else {

Ok, now plz remove this line:

with (document.Registration) {

and remove its closing bracket, and then at the form tag attachment, write :' onsubmit="return validateForm()"'

It should work this way, but a very small problem may lead it not working, if u have firefox then plz install a plugin called "firebug", if u have error at javascript, it will point u to it.

Goodluck

Max

Ok, I too need to have mandatory fields, so, could someone please paste a complete working verion of the script discussed above? Thank you for all your help, I really do appreciate it, just understand that for those of us that don't know proper javascript syntax, saying "remove its closing bracket" is frustrating, because I don't know which one that is!🙂 How should the whole thing look?

Ok, I found the solution. The following code works, in Firefox, and IE6. It comes from Dynamicdrive.com. Enter this in your Form Javascript tab:

function formCheck(formobj){
	// Enter name of mandatory fields
	var fieldRequired = Array("Type", "firstname", "lastname"«»);
	// Enter field description to appear in the dialog box
	var fieldDescription = Array("Type", "First Name", "Last Name"«»);
	// dialog message
	var alertMsg = "Please complete the following fields:\n";
	
	var l_Msg = alertMsg.length;
	
	for (var i = 0; i < fieldRequired.length; i++){
		var obj = formobj.elements[fieldRequired[i]];
		if (obj){
			switch(obj.type){
			case "select-one":
				if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""«»){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			case "select-multiple":
				if (obj.selectedIndex == -1){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			case "text":
			case "textarea":
				if (obj.value == "" || obj.value == null){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			default:
			}
			if (obj.type == undefined){
				var blnchecked = false;
				for (var j = 0; j < obj.length; j++){
					if (obj[j].checked){
						blnchecked = true;
					}
				}
				if (!blnchecked){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
			}
		}
	}

	if (alertMsg.length == l_Msg){
		return true;
	}else{
		alert(alertMsg);
		return false;
	}
}

Remember to change the Mandatory Fields names and descriptions to the ones you are using in your form HTML.

Put exactly this in your Form Tag Attachment field on the General tab:

onsubmit="return formCheck(this);"

On submit, empty mandatory fields will generate a warning. That's it! Hope I helped someone.

Hi Greg,

Thanks for that, I'll copy it into a spotlight post or a FAQ when I have a moment.

There is a much simpler JavaScript example in the How To forum spotlights that might help with some problems.

Bob

OMG Thank you so much for posting this! I was struggling with this as well and this works so much better than what I was trying to do and suprisingly easy to work with, just alter those two lines at the top and that's it.

OMG Thank you so much for posting this! I was struggling with this as well and this works so much better than what I was trying to do and suprisingly easy to work with, just alter those two lines at the top and that's it.

You're welcome!:) I just about wasted a day on this, when I should have gone to dynamicdrive first, it is a great resource.

The following is the full html of a form that uses the mandatory fields, try to put it in the html code:

<table width="100%" border="0">
<tr>
<td>First Name </td>
<td>
<input type="text" name="FirstName" />

</td>
<td> </td>
</tr>
<tr>
<td>Last Name </td>
<td><input type="text" name="LastName" /></td>
<td> </td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="Email" /></td>
<td> </td>
</tr>
<tr>
<td>Enter Text in the image</td>
<td>{imageverification}</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="Submit" onclick='if(this.form.FirstName.value==""){alert("Enter First Name"); this.form.FirstName.focus(); return false; } if(this.form.LastName.value==""){alert("Enter Last Name"); this.form.LastName.focus(); return false; } if(this.form.Email.value==""){alert("Enter Email"); this.form.Email.focus(); return false; }' /></td>
<td> </td>
</tr>
</table>

Hi talalilo,

This works OK. You can do the same thing in ChronoForms a little more elegantly but dividing it up. Put this code in the 'Form HTML' field:

<table width="100%" border="0">
<tr>
<td>First Name </td>
<td><input type="text" name="FirstName" /></td>
</tr>
<tr>
<td>Last Name </td>
<td><input type="text" name="LastName" /></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="Email" /></td>
</tr>
<tr>
<td>Enter Text in the image</td>
<td>{imageverification}</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="Submit" value="Submit" onclick='' /></td>
</tr>
</table>

and this in the Form JavaScript field (I've just changed your code into a function replacing 'this.form' with the variable 'form'):

function checkForm(form) {
if(form.FirstName.value==""«»){
  alert("Enter First Name"«»); 
  form.FirstName.focus(); 
  return false;
}
if( form.LastName.value==""«»){
  alert("Enter Last Name"«»); 
  this.form.LastName.focus(); 
  return false; 
} 
if(form.Email.value==""«»){
  alert("Enter Email"«»); 
  this.form.Email.focus(); 
  return false; 
}
}

and lastly put the function call onsubmit="return checkForm(this);" into the 'Form tag attachment' field on the General tab.

This is a bit more long-winded than your version but is probably easier to maintain in the long term.

Bob