Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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.

    Code:
    <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>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.
    Last edited by Philip M; 02-24-2012 at 04:42 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    jcoder (02-24-2012)

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    onsubmit

    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

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,917
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by jcoder View Post
    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.

    Code:
    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.
    Last edited by Philip M; 02-24-2012 at 06:52 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,616
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by jcoder View Post
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •