multiple scripts in one javascript file

Discussion in 'Web Design and Development' started by cwesty, Apr 21, 2007.

  1. cwesty macrumors member

    Joined:
    Oct 22, 2005
    #1
    hi,

    I'm having issues validating a series of fields in javascript.

    I have 2 field validation functions, and 2 regular expressions to validate email and phone number.

    However, the form worked when i didn't have the regular expresisons in.
    Now that they are there, the script ignores the 1st name./ and family name validation and just checks the phone number, once the phone no' is correct it submits the form without checking the other fields?!!!

    Any ideas what i have missed out???


    cheers
    c
     
  2. Winterfell macrumors regular

    Joined:
    Apr 3, 2007
    Location:
    Tulsa, Oklahoma
    #2
    Might try posting the code for starters. :p It can't very well be debugged otherwise.

    So post that code, I'm sure you'll get some helpful responses! :)
     
  3. cwesty thread starter macrumors member

    Joined:
    Oct 22, 2005
    #3
    here's the code...

    Sorry - here is the code and comments:

    <!-- function and statement to validate the text fields first namd and family name.

    -->
    function validateForm(form) { //This is the name of the function

    if (form.shipFirstName.value == "") { //This checks to make sure the field is not empty
    alert("The First Name is empty"); //Informs user of empty field
    form.shipFirstName.focus( ); //This focuses the cursor on the empty field
    return false; //This prevents the form from being submitted
    }

    if (form.shipFamilyName.value == "") { //This checks to make sure the field is not empty
    alert("The Family Name is empty"); //Informs user of empty field
    form.shipFamilyName.focus( ); //This focuses the cursor on the empty field
    return false; //This prevents the form from being submitted
    }

    }






    //reg ex for email validation:


    re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/


    function validateForm(Form) {
    if (re.test(Form.billEmailAddress.value)) {
    return true
    }
    else
    alert("Invalid Email Address")
    myForm.billEmailAddress.focus()
    myForm.billEmailAddress.select()


    return false

    }


    // Regular Expression for phone validation.


    re = /^(\s*\(?0\d{5}\)?\s*\d{6}\s*)|(\s*\(?0\d{3}\)?\s*\d{3}\s*\d{4}\s*)$/

    function validateForm(form) {
    validPhone = re.exec(form.phone.value)
    if (re.test(form.phone.value)) {
    return true
    }




    else {
    alert(form.phone.value + " isn't a valid number")
    form.phone.focus()

    }

    return false

    }
     
  4. Winterfell macrumors regular

    Joined:
    Apr 3, 2007
    Location:
    Tulsa, Oklahoma
    #4
    Well, the first thing is you have three functions named the same thing (validateForm()) and taking the same arguments (a reference to the form), which makes things tough as JavaScript is VERY picky. What happens is the previous two validateForm() declarations are overwritten by the third, so only the phone field is ever validated.

    So, the first thing we need to do is combine all of those checks into one validateForm() function:
    Code:
    function validateForm(form) {				//This is the name of the function
    	if (form.shipFirstName.value == "") {	//This checks to make sure the field is not empty
    		alert("The First Name is empty.");	//Informs user of empty field
    		form.shipFirstName.focus();		//This focuses the cursor on the empty field
    		return false;				//This prevents the form from being submitted
    	}
    	if (form.shipFamilyName.value == "") {	//This checks to make sure the field is not empty
    		alert("The Family Name is empty.");	//Informs user of empty field
    		form.shipFamilyName.focus();		//This focuses the cursor on the empty field
    		return false;				//This prevents the form from being submitted
    	}
    
    	re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;	// Email regex.
    	if (re.test(trim(form.billEmailAddress.value))) {
    		return true;
    	}
    	else{
    		alert(form.billEmailAddress.value + " isn't a valid email address.");
    		form.billEmailAddress.focus();
    		form.billEmailAddress.select();
    		return false;
    	}
    
    	re = /^(\s*\(?0\d{5}\)?\s*\d{6}\s*)|(\s*\(?0\d{3}\)?\s*\d{3}\s*\d{4}\s*)$/;	// Phone regex.
    	//validPhone = re.exec(form.phone.value);
    	if (re.test(trim(form.phone.value))) {
    		return true;
    	}
    	else {
    		alert(form.phone.value + " isn't a valid number.");
    		form.phone.focus();
    		return false;
    	}
    }
    Now, the validateForm() function will move down the form, validating each input, and breaking when one of them fails to pass the test(s).

    However, when you check whether or not the first name or family name is empty, you're doing a simple comparison with an empty string. What if the person put a space in the form field? You probably don't want that, so we want to trim it.

    JavaScript has no real string trimming function, so we'll make our own. The following trimming regex can be found all over the web for string trimming, so I don't consider it copyrighted or otherwise belonging to anyone. :p
    Code:
    // Removes left whitespace.
    function ltrim(value) {
    	var re = /\s*((\S+\s*)*)/;
    	return value.replace(re, "$1");
    }
    // Removes right whitespace.
    function rtrim(value) {
    	var re = /((\s*\S+)*)\s*/;
    	return value.replace(re, "$1");
    }
    // Removes both.
    function trim(value) {
    	return ltrim(rtrim(value));
    }
    Now we have something relatively useful. Put it all together and we get:
    Code:
    <script language="javascript" type="text/javascript">
    // Removes left whitespace.
    function ltrim(value) {
    	var re = /\s*((\S+\s*)*)/;
    	return value.replace(re, "$1");
    }
    // Removes right whitespace.
    function rtrim(value) {
    	var re = /((\s*\S+)*)\s*/;
    	return value.replace(re, "$1");
    }
    // Removes both.
    function trim(value) {
    	return ltrim(rtrim(value));
    }
    
    function validateForm(form) {				//This is the name of the function
    	if (trim(form.shipFirstName.value) == "") {	//This checks to make sure the field is not empty
    		alert("The First Name is empty.");	//Informs user of empty field
    		form.shipFirstName.focus();			//This focuses the cursor on the empty field
    		return false;						//This prevents the form from being submitted
    	}
    	if (trim(form.shipFamilyName.value) == "") {	//This checks to make sure the field is not empty
    		alert("The Family Name is empty.");	//Informs user of empty field
    		form.shipFamilyName.focus();		//This focuses the cursor on the empty field
    		return false;						//This prevents the form from being submitted
    	}
    
    	re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;	// Email regex.
    	if (re.test(trim(form.billEmailAddress.value))) {
    		return true;
    	}
    	else{
    		alert(form.billEmailAddress.value + " isn't a valid email address.");
    		form.billEmailAddress.focus();
    		form.billEmailAddress.select();
    		return false;
    	}
    
    	re = /^(\s*\(?0\d{5}\)?\s*\d{6}\s*)|(\s*\(?0\d{3}\)?\s*\d{3}\s*\d{4}\s*)$/;	// Phone regex.
    	//validPhone = re.exec(form.phone.value);
    	if (re.test(trim(form.phone.value))) {
    		return true;
    	}
    	else {
    		alert(form.phone.value + " isn't a valid number.");
    		form.phone.focus();
    		return false;
    	}
    }
    </script>
    There is one additional snag, however. The phone regex doesn't appear to be working correctly, and my regular expression skills are pretty newbish, so I'll leave that open to someone else for the time being. :eek:

    Hope this helps.
     
  5. dcv macrumors G3

    Joined:
    May 24, 2005
    #5

    Aside from the poorly laid-out code (it helps to indent code, use {} where applicable and finish your statements with a semicolon (not 'strictly' necessary but it's good practice)) - you've declared the same function three times over! Hence only the third (phone number validation) will run. Why do you need three functions when one simple one would suffice?

    Edit: Damn, beaten to it by Winterfell!
     

Share This Page