Merging two Javascripts into one

[aimeeburn12]

I am having trouble merging two Javascripts into one. (this is all new to me) The variables are calling from two different HTML pages, however the errMsg displays are not coming up on both pages. Here is my Javascript:

function validate(){
	var user_id = document.getElementById("user_id").value;
	var email = document.getElementById("email").value;
	var pwd1 = document.getElementById("pwd1").value.trim();
	var pwd2 = document.getElementById("pwd2").value;
	var name = document.getElementById("name").value;
	var genm = document.getElementById("genm");
	var genf = document.getElementById("genf");
	var Street = document.getElementById("Street").value;
	var City = document.getElementById("City").value;
	var Postcode = document.getElementById('Postcode').value.trim()
	var State = document.getElementById("State");
	
	var errMsg = "";
	var result = true;
	var pattern = /^[a-zA-Z ]+$/;

	if (email == "") {
		errMsg += "Email cannot be empty.\n";
}

	if (pwd1 == "") {
		errMsg += "Password cannot be empty.\n";
	}

	else if (!pwd1.match(/^\w{8,}$/))
		errMsg += "Password must be 8 Characters Long. \n";  

	if (pwd2 == "") {
		errMsg += "Retype Password cannot be empty.\n";
	}

	if (name == "") {
		errMsg += "Please put your full name in Name.\n";
	}

	if ((genm == "")&&(genf == "")) {
		errMsg += "A gender must be selected.\n";
	}

	if (Street == "") {
		errMsg += "Please put in your Street & Street Number.\n";
	}
	if (City == "") {
		errMsg += "Please put in the City.\n";
	}
	if (Postcode == "") {
		errMsg += "Please put in Postcode.\n";
	}
	else if (!Postcode.match(/^\d{4}$/))
		errMsg += "wrong postcode. \n";

	if (State == "") {
		errMsg += "Please choose your State.\n";
	}

	/*rule two- check inputs have @ symbol */

	if (email.indexOf('@') < 0 ) {
		errMsg += "Email must contain an @ symbol.\n";
	}

	/*rule three- check passwords are the same */

	if (pwd1 != pwd2) {
		errMsg += "Passwords do not match.\n";
	}

	if (errMsg != "") {
		alert (errMsg);
		result = false;
	}
	return result;
}

	function init () { /*init validate the form for register.html*/
	var regform = document.getElementById("regform");
	
	regform.onsubmit = validate;
}

function validate(){ /*validation for order.html*/
	var delivery = document.getElementById("delivery").value;
	var billing = document.getElementById("billing").value;
	var phone = document.getElementById("phone").value;
	var cardname = document.getElementById("cardname").value;
	var cardnumber = document.getElementById("cardnumber").value;
	var carddate = document.getElementById("carddate").value;
	var CVV = document.getElementById("CVV").value;

	var errMsg = "";
	var result = true;
	var pattern = /^[a-zA-Z ]+$/;


	/*rule one- checking all inputs have error msgs if no input*/


if (delivery == "") {
	errMsg += "Must put delivery address.\n";
}


	if (billing == "") {
		errMsg += "Must put billing address.\n";
}

	if (phone == "") {
		errMsg += "Put in mobile phone.\n";
	}
	else if (!phone.match(/^\d{10}$/))
		errMsg += "Phone number needs to be 10 digits. \n";

	if (cardname == "") {
		errMsg += "Please put in card name.\n";
	}

	if (cardnumber == "") {
		errMsg += "Must put in card number.\n";
	}
	else if (!cardnumber.match(/^\d{16}$/))
		errMsg += "Card number is 16 digits long. \n";


	if (carddate == "") {
		errMsg += "Must put in card expiry date.\n";
	}

	if (CVV == "") {
		errMsg += "Please put in card CVV (on the back).\n";
	}
	else if (!CVV.match(/^\d{3}$/))
		errMsg += "CVV must be 3. \n";
	
	if (check =="") {
		errMsg += "Pick Up or Delivery must be checked. \n";
	}

if (errMsg != "") {
		alert (errMsg);
		result = false;
	}
	return result;
}

function otherClick () { /*trigger the show/hide of delivery input by the delivery checkbox*/
	var other = document.getElementById("deli");
	if (other.checked) {
		document.getElementById("de").style.display="block";

	}

	else {
		document.getElementById("de").style.display= "none";
		document.getElementById("delivery").value="";
	}

	var other2 = document.getElementById("on"); /*trigger the show/hide of the payment div when pay online checkbox is clicked*/
	if (other2.checked) {
		document.getElementById("deets").style.display="block";
	}
	else {
		document.getElementById("deets").style.display= "none";
		document.getElementById("deets").value="";
	}
}

function init () { /*ensures all functions including validation and click will pop up an error message */
	document.getElementById("deli").checked=false;
	document.getElementById("de").style.display="none";

	document.getElementById("on").checked=false;
	document.getElementById("deets").style.display="none";

	var regform = document.getElementById("regform");
	regform.onsubmit = validate;

	var other = document.getElementById("deli");
	other.onclick = otherClick;

	var other2 = document.getElementById("on");
	other2.onclick = otherClick;

	regform.onsubmit = validate;
}

	window.onload = init;

Currently both of my HTML pages are set up like this:

form method=“POST” action=#linkhere onsubmit= “validate()”>

Is someone able to point me in the right direction as to what I am missing?

[James_Hibbard]

In the code you posted, you have two functions called “validate”. If these functions are present on the same page, then the second will overwrite the first. E.g.:

function foo () {
  console.log('foo');
}

function foo () {
  console.log('bar');
}

foo();
// bar

[SamuelCalifornia]

One probably improvement is to check each field more extensively. Currently the code only checks for empty strings. What happens if one or more spaces are entered?

A developer more experienced with JavaScript can make more useful suggestions but note that if each of the if statements that check for an empty string were to use a function to do the check then the improvement could be made in just the function instead of each if statement.