Please Help! Only one Anonymous Functions works at a time.

[jcoder]

Am I doing something wrong here? I have two anonymous functions to validate two different forms on two different pages. They both work on the individual page, though when I try and put them in the same script.js folder only the top function seems to work.

<script type="text/javascript">

// Form Validation / Catalog Template ----------------------------------------------------------------------------------------------------------------------

document.getElementById("formValidation").onsubmit = function(){
	if(document.getElementById("reqAddrCont").value == ""){
		document.getElementById("reqAddrCont").className = "error";
		return false;

	}if(document.getElementById("reqAddrName").value == ""){
		document.getElementById("reqAddrName").className = "error";
		return false;

	}if(document.getElementById("reqAddr1").value == ""){
		document.getElementById("reqAddr1").className = "error";
		return false;

	}if(document.getElementById("reqAddr6").value == ""){
		document.getElementById("reqAddr6").className = "error";
		return false;

	}if(document.getElementById("reqAddrState").value == "0"){
		document.getElementById("reqAddrState").className = "error";
		return false;

	}if(document.getElementById("reqAddrPost").value == ""){
		document.getElementById("reqAddrPost").className = "error";
		return false;

	}if(document.getElementById("reqAddrPhone").value == ""){
		document.getElementById("reqAddrPhone").className = "error";
		return false;
		
	}if(document.getElementById("reqAddrEMail").value == ""){
		document.getElementById("reqAddrEMail").className = "error";
		return false;

	}else{
		return true;
	}
};

// Form Validation / New Account Template --------------------------------------------------------------------------------------------------------------------------

document.getElementById("formValidationAccount").onsubmit = function(){
	if(document.getElementById("AcctName").value == ""){
		document.getElementById("AcctName").className = "error";
		return false;

	}if(document.getElementById("AcctTitle").value == ""){
		document.getElementById("AcctTitle").className = "error";
		return false;

	}if(document.getElementById("AcctCompany").value == ""){
		document.getElementById("AcctCompany").className = "error";
		return false;

	}if(document.getElementById("AcctAddress1").value == ""){
		document.getElementById("AcctAddress1").className = "error";
		return false;

	}if(document.getElementById("AcctAddress2").value == ""){
		document.getElementById("AcctAddress2").className = "error";
		return false;

	}if(document.getElementById("AcctAddress6").value == ""){
		document.getElementById("AcctAddress6").className = "error";
		return false;

	}if(document.getElementById("AcctState").value == "0"){
		document.getElementById("AcctState").className = "error";
		return false;
		
	}if(document.getElementById("AcctPost").value == ""){
		document.getElementById("AcctPost").className = "error";
		return false;

	}if(document.getElementById("AcctCountry").value == ""){
		document.getElementById("AcctCountry").className = "error";
		return false;

	}if(document.getElementById("AcctPhone").value == ""){
		document.getElementById("AcctPhone").className = "error";
		return false;

	}if(document.getElementById("AcctLogin").value == ""){
		document.getElementById("AcctLogin").className = "error";
		return false;

	}if(document.getElementById("AcctLogin2").value == ""){
		document.getElementById("AcctLogin2").className = "error";
		return false;

	}if(document.getElementById("AcctPassword").value == ""){
		document.getElementById("AcctPassword").className = "error";
		return false;

	}if(document.getElementById("AcctPasswordDupe").value == ""){
		document.getElementById("AcctPasswordDupe").className = "error";
		return false;

	}else{
		return true;
	}
};

</script>

[Philip M]

Simple solution - use named functions.

To invoke more than function:
onsubmit="ValidateForm(); ValidateAccount();"

Form validation of the pattern if(document.getElementById("reqAddrName").value == ""){ is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. Numeric values, such as zip codes and phone numbers, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.

Finally, if form elements are to be submitted to a server, they must be given names (not just ids). In fact there is not a lot of point in assigning ids to form elements.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

[jcoder]

Is there a way not to use onsubmit in the html? I wanted to keep all JS out of the HTML even if it is just onsubmit. Any ideas on how I could do this?

Thanks

[Philip M]

Originally Posted by jcoder

Is there a way not to use onsubmit in the html? I wanted to keep all JS out of the HTML even if it is just onsubmit. Any ideas on how I could do this?

Thanks

You would do better to focus your efforts on the issues I have mentioned. It is more important that the script performs the validation properly and effectively than that the Javascript is unobtrusive.

function init() {
//Attaching the onSubmit event to the form
theForm = document.getElementById('formid');
theForm.onsubmit = function () {
return ValidateForm(this);
}
}

I expect that you know that JavaScript form validation only provides convenience for users, not security. This means that JavaScript should be used as an "enhancement", not as a requirement. So your form should not be dependent on JavaScript alone to perform your validation. Instead, whatever server-side language you use to process the form (PERL, ASP, PHP, etc.) should also perform the same validation. Otherwise, people will be able to bypass your validation (and even possibly inject malicious code) simply by disabling Javascript.

[felgall]

Originally Posted by jcoder

Is there a way not to use onsubmit in the html? I wanted to keep all JS out of the HTML even if it is just onsubmit. Any ideas on how I could do this?

Thanks

Yes - if you use event listeners instead of event handlers then you can attach each function to the same event. I suggest that you assign each function a name though because then that name can be used if you decide to add code to detach that event listener rather than having to use the entire content of the function to identify which one to detach.

You will also need to change the return true/false to use preventDefault() instead as returning a value doesn't work with event listeners.

See http://javascriptexample.net/events01.php for cross browser code to attach event listeners that will use the equivalent JScript for IE8 and earlier.
See http://javascriptexample.net/events02.php for code to detach event listeners
See http://javascriptexample.net/events04.php for cross browser preventDefault() code
See http://javascriptexample.net/domform13.php for an example of how to attach a function to a submit event listener

If you attach the functions that way you can do it with independent statements in each script that will not overwrite one another.