2 Replies - 363 Views - Last Post: 29 November 2012 - 04:50 PM

#1 duffgirl  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 29-October 12

JS ignores my next function inside a function

Posted 29 November 2012 - 03:16 PM

Hi there,

I am trying to learn JS and this is a homework assignment I am stumped on. I have created a ValidateForm() function
to hold my functions to validate the other areas of the form. ValidateStudentsName() is recognized and if not valid an alert is thrown, then the other functions will validate and respond as well, whether vaild or not. If the student name is entered correctly, and everything else is wrong, nothing happens. I have changed return value for the functions, trying to test different things, but still no luck. Any thoughts are greatly appreciated.

Thank you,
MD

  function ValidateForm()

		    {

		        ValidateStudentsName();
		        ValidateSocialSecurityNumber();
		        ValidateHomePhoneNumber();
		        ValidateEmail();
		        ValidateOptSelect();
		        




		    }

		    //validates student name 
		    function ValidateStudentsName(){

		        newNameField = ""
		        regExpression = /^([a-zA-Z])([a-zA-Z])+\s([a-zA-Z]+)$/
                blnValidName = regExpression.test(document.frmStudentData.txtStudentsName.value)
		        if (blnValidName) {
		            regExpression.exec(document.frmStudentData.txtStudentsName.value)
		            newNameField = RegExp.$1.toUpperCase() +
                    RegExp.$2.toLowerCase() + " " +
                    RegExp.$3.toUpperCase() +
                    RegExp.$4toLowerCase()
		            document.frmStudentData.txtStudentsName.value = newNameField
		            return blnValidName;
		        }
		        else{
		            alert("Please enter full name, cannot be blank or contain numbers");
		        }
		    }
	

		    // validates SSN
		    function ValidateSocialSecurityNumber(){
	
		        var regObject
		        var blnTestResult
		        var ValidSSN
	
		        regObject = /^\?(\d{3})\?[\.\-\/ ]?(\d{2})[\.\-\/ ](\d{4})$/;
		        blnTestResult = regObject.test(document.frmStudentData.txtSocialSecurityNumber.value);
	
	
		        //If its not null (was found /valid)
	
		        if (blnTestResult)  {
		            ValidSSN = regObject.exec(document.frmStudentData.txtSocialSecurityNumber.value);
		            document.frmStudentData.txtSocialSecurityNumber.value =  ValidSSN[1] + "-" + ValidSSN[2] + "-" + ValidSSN[3];
	
		            return ValidSSN;
		        }
		        else {
		            alert ("Please enter vaild SSN, Must be 3 numbers 2 numbers and 4 numbers");
		        }
		    }
		    // validates home phone number
		    function ValidateHomePhoneNumber(){
	
		        var regObject
		        var blnTestResult
		        var ValidPhone
	
		        regObject = /^\(?(\d{3})\)?[\.\-\/ ]?(\d{3})?[\.\-\/ ]?(\d{4})$/;
		        blnTestResult = regObject.test(document.frmStudentData.txtHomePhone.value);
	
	
		        //If its not null (was found /valid)
	
		        if (blnTestResult)  {
		            ValidPhone = regObject.exec(document.frmStudentData.txtHomePhone.value);
		            document.frmStudentData.txtHomePhone.value = "(" + ValidPhone[1] + ") " + ValidPhone[2] + "-" + ValidPhone[3];
		            return ValidPhone;
		        }
		        else {
		            alert ("Please enter valid phone number, must be 3 numbers 3 numbers and 4 numbers");
		        }
		    }



		    // Validate Email Function

		    function ValidateEmail() {

		        regExpression = /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/
		        blnValidEmail = regExpression.test(document.frmStudentData.txtEmailAddress.value)
		        if (blnValidEmail) {
		            regExpression.exec(document.frmStudentData.txtEmailAddress.value)
		            return blnValidEmail;
		        }
		        else {
		            alert("Please enter valid email address, must meet minimum format standards");
		        }
		    }



		    // Select Start Year Validation

		    function ValidateOptSelect() {


		        if (document.frmStudentData.optStartYear.value == "0") {

		            alert("You must select an option");

		        }

		    }
		    //resets form


            function formReset() {
                document.getElementById("StudentData").reset();
            }

		</script>
		</head>
		
		<body>
<form name="frmStudentData" id="StudentData" action="StudentData.htm" method="get" onsubmit="return ValidateForm()">
			<table class="StudentData">
				<tr>
					<th colspan="2" class="">
						Student Personal Information<br />
						
					</th>
				</tr>
				<tr>
					<td><label id="lblStudentsName"  class="formLabel">Students Name:</label></td>
					<td><input type="text" name="txtStudentsName" maxlength="75" /></td>
				</tr>
				<tr>
					<td valign="top">
					<label id="lblSocialSecurityNumber" class="formLabel">Social Security Number:</label></td>
					<td><input type="text" name="txtSocialSecurityNumber"  /><br />
					</td>
                </tr>
                <tr>
                    <td valign="top">
						<label id="lblHomePhone" class="formLabel">Home Phone:</label>
					</td>
					<td class="sampleAlign"><input type="text" name="txtHomePhone" /><br />
                        </td>
                </tr>
				<tr>
					<td><label id="lblEmail" class="formLabel">Email Address:</label></td>
					<td><input type="text" name="txtEmailAddress" /></td>
				</tr>
				<tr>
					<td><label id="lblStartYear" class="formLabel">Start Year</label></td>
					<td><select name="optStartYear">
                                <option value="Choose Year">Choose</option>
                                <option value="2012">2012</option>
                                <option value="2013">2013</option>
                                <option value="2014">2014</option>
                                <option value="2015">2015</option>
                                <option value="2016">2016</option>
                    </select> </td>
				</tr>
				<tr>
					<td valign="top">
                        <label id="lblGraduation" class="formLabel">Expected Graduation Month:</label><br />
                        <input type="radio" name="radGraduationMonth" id="r1" value="November = 1"/>November 1st
                        <input type="radio" name="radGraduationMonth" id="r2" value="June = 2"/>June 2nd


				</td>	
				</tr>
                <tr>
					<td colspan="2"><hr /></td>
				</tr>
				<tr>
					<td class="" colspan="2">
						<input type="button" name="btnSubmit"  value="Submit" onclick="ValidateForm()" />&nbsp;&nbsp;
						<input type="button" name="btnReset" " value="Reset" onclick="formReset()" />
					</td>
				</tr>
			</table>
    </form>




		</body>
		</html>




Is This A Good Question/Topic? 0
  • +

Replies To: JS ignores my next function inside a function

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1138
  • View blog
  • Posts: 7,105
  • Joined: 07-September 06

Re: JS ignores my next function inside a function

Posted 29 November 2012 - 04:10 PM

Returning a value only works if you use the value which has been returned. At the moment your ValidateForm function doesn't have a return line in there, meaning that it will always have an undefined return value. That isn't what you want.

If you run this example you will see what I mean:
alert((function a(){})()); // undefined



Then if you were to run this code:
if(undefined){alert("1");}else{alert("0");}


You would see that the alert says "0", which means that undefined is false. So, your form should never submit based on the code above.

Additionally, if you have a path through a function which can not run past a return statement, then it can return undefined (not recommended if you want to actually have a return value elsewhere). Example:
function r(){
  if(false){
    return "PASSED";
  }
  // undefined
}
alert(r()); // undefined



So I would suggest having a return statement even if undefined would work for your needs on a function that has a chance of returning a meaningful value. This will cause a lot of problems in most programming languages (since the parser or compiler will see that the function says it is returning something, yet can get to the end of a function without returning anything).

For your ValidateForm function, I would suggest writing it like so:
function ValidateForm()
{
	return ValidateStudentsName() || 
	       ValidateSocialSecurityNumber() || 
	       ValidateHomePhoneNumber() || 
	       ValidateEmail() || 
	       ValidateOptSelect();
}


Which will take the return values from each of the other Validate functions that are being called and or (||) them together. Since the form is expecting a true or false value to be returned to tell it if it should submit or not it makes sense to only return true or false values from the other functions so they can easily and unambiguously be converted into booleans.

Now, this requires you to fix the other functions and ensure that there are always return values; which I am leaving to you as it is a homework assignment :)

If you were to just leave possible undefined values in your returns you could get some interesting things happening. For example:
alert(undefined || "Pass"); // "Pass"

alert(undefined || "Pass" || undefined || false); // "Pass"


As you can see, some things that you wouldn't necessarily expect can start happening when throwing types together.

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

#3 duffgirl  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 29-October 12

Re: JS ignores my next function inside a function

Posted 29 November 2012 - 04:50 PM

Thank you so much for pointing me in the right direction. I am making changes now :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1