Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

Just-In-Timeberlake: Aug 18, 2003

Sointenly posted:

I'm trying to do a little work for my buddies site, and teach myself JS at the same time. Running into a snag though with one little form.

Basic set up of the form is like this:

Enter Username:_______ (which is checked by if/else if for correct length)

Enter Email: ________
Verify Email: _______

Not having any problem with the username, but rather with verifying the email addy.

I know ill have to create a function and then i'm assuming if statements where Email = verify email. But i'm not exactly sure how to start it. I've tried googleing it, but not luck.

If someone could give me a quick example of something like this i'd appreciate it.

in case this makes a diff, here is the code of the username verification

function checkInput(usernameId) {
var usernameValue = document.getElementById(usernameId).value;
alert("username is : " + usernameValue);
if (usernameValue.length < 4)
{
alert("the username is too short");
}
else if (usernameValue.length > 8)
{
alert ("the username is too long");
}
else
{
alert("the username is ok");
}

I'd use a regex for the email, like so:

code:

function isEmail(s) {
     var reEmail = /^.+\@.+\..+$/;
     return reEmail.test(s);
}

if(!isEmail('abc@abc.com')) {
    alert("The email address you entered is not in the correct format!");
}

# ¿ Oct 11, 2009 19:16

Adbot: ADBOT LOVES YOU

# ¿ May 4, 2024 03:19

Just-In-Timeberlake: Aug 18, 2003

sorry, I misunderstood:

code:


function checkEmail() {
     var email1 = document.getElementById('email1').value;
     var email2 = document.getElementById('email2').value;

     if(email1 != email2) {
          alert('The two emails do not match!');
          return false;
     }
     else {
          return true;
     }
}

Combine it with the other code to do a full verification (email addresses match and are in a valid format)

# ¿ Oct 11, 2009 22:00

Just-In-Timeberlake: Aug 18, 2003

Sointenly posted:

Sick, thank you!

one last thing though, this is my HTML for the button used in the form... i initially wrote it to do the username verification.

<input type="button" value ="checkIt" onclick = "checkInput('username');" />

do i need to make any changes to the html so that it will check email as well? thank you

I tend to make one function as a wrapper for all my verification functions, kind of like this:

code:

function ValidateForm() {
    if(!validateUsername()) return false;
    if(!validateEmail()) return false;
    
    return true;
}

Stick that in your submit code:

code:

<form id="myform" onsubmit="return ValidateForm();" method="POST" action="submissionpage.html">

# ¿ Oct 12, 2009 00:30

Just-In-Timeberlake: Aug 18, 2003

Daedleh posted:

I actually came here to ask about this very problem as I'm having some trouble with differences between IE & Firefox. This is the code I've got:
code:
	//Check if the user has entered an email address
	var email = document.getElementById('email').value;
	if (email.length == 0 ) {
		alert('Please enter an e-mail address.');
		document.getElementById('email').focus();
		return;
	}

	//And if they've confirmed it
	var cemail = document.getElementById('con-email').value;
	if (cemail.length == 0 ) {
		alert('Please confirm the e-mail address.');
		document.getElementById('con-email').focus();
		return;
	}

	//And check that the email and confirmation match.
	if (cemail != email) {
		alert('The e-mail addresses provided do not match.');
		document.getElementById('con-email').focus();
		return;
	}
Now I can't see any differences in the relevant code between my final check and what you've put but while the code works fine in Firefox, in IE8 (windows 7 so I don't have the others to hand) it always gets a mismatch.

The page I'm trying to get it working on is here (yeah go ahead and mess about if you want. It will send out an e-mail with a random password but there's nowhere to login yet):
http://nickjwilliams.co.uk/cms/l-administrators.php

Found it, change the "name" property of your username input tag, right now it's:

code:

<input id="username" name="email" type="textbox" class="inputtext">

IE doesn't like it sharing the name with the email input tag.

Just-In-Timeberlake fucked around with this message at 01:03 on Oct 12, 2009

# ¿ Oct 12, 2009 00:36

Just-In-Timeberlake: Aug 18, 2003

Sointenly posted:

acht! can you spot where I'm loving up here

maybe best to mention this now, but when all requirements of the form are met, I need to alert a message that states something like "Username and Password accepted"

code:

<html>
	<head>
		<title>Registration Form</title>
		
		<script language="javascript" type="text/javascript">
		
			function checkEmail(s) {
			     var reEmail = /^.+\@.+\..+$/;
			     return reEmail.test(s);
			}
			
			function validateEmail() {
				var email1 = document.getElementById("Email1").value;
				var email2 = document.getElementById("Email2").value;
				
				if(email1.length == 0) {
					alert("Please enter your email");
					return false;
				}
				
				if(email2.length == 0) {
					alert("Please confirm your email");
					return false;
				}
				
				if(email1 != email2) {
					alert("The two emails do not match");
					return false;
				}
					
				if(!checkEmail(email1)) return false;
			}
			
			function validateUsername () {
				var usernameValue = document.getElementById(usernameId).value;
			     alert("username is : " + usernameValue);
			     if (usernameValue.length < 4) {
			         alert("the username is too short");
			         return false;
			     } 
			     
			     if (usernameValue.length > 8) {
			         alert ("the username is too long");
			         return false;
			     }
			     
			     return true;

			}
			
			function validateForm() {
				if (!validateEmail()) return false;
				if (!validateUsername()) return false;
				
				return true;
					
			}
			
		</script>
	</head>

	<body>
		<form id="myform" onsubmit="return validateForm();" method="POST" action="submitpage.html">
		  	User name: 
		  	<input type="text" id="username" maxlength="12"/><br />
		  	Password: 
		  	<input type="text" id="Email1" maxlength="24"/><br />
		  	Verify password: 
		  	<input type="text" id="Email2" /><br />
		  	<input type="submit" value ="Submit Form" />
		<form>
	</body>
	
</html>

I wouldn't put a confirmation on this page because it might fail for some reason on the page that processes the form submission. The confirmation should show up after the form is submitted, processed and then come back to a confirmation page.

If you're dead set on a "success" alert on this page, stick it right before the "return true;" in the "validateForm();" function.

Just-In-Timeberlake fucked around with this message at 02:25 on Oct 13, 2009

# ¿ Oct 13, 2009 02:20

Just-In-Timeberlake: Aug 18, 2003

Sointenly posted:

he wants all of the JS done via external file, does much change if i move everything out of the HTML?

Nope.

# ¿ Oct 13, 2009 02:58

Adbot: ADBOT LOVES YOU

# ¿ May 4, 2024 03:19

Just-In-Timeberlake: Aug 18, 2003

Sointenly posted:

First of all, thank you very much for all the help.

Everything is working with the exception of one little bug.

If both email fields are left blank, it will alert the user to enter an email, but then it also alerts the user that inputs were accepted (because it then goes on to check that email1==email2 and i assume it accepts two blank fields as being == )
code:
function checkInput(usernameId, emailId, varemaildId) {
    var usernameValue = document.getElementById(usernameId).value;
    var email1= document.getElementById(emailId).value;
    var email2= document.getElementById(varpemailId).value;
      if (usernameValue.length <4 || usernameValue.length > 8) {
            alert("the username must be between 4 and 8 characters long");
 }
      if(email2.length == 0) {
			 alert("Please confirm your email");
 } 
      if(email1 != email2) {
              alert('The two emails do not match!');
 }      
      else {
              alert("User name and Email accepted");

 }
} 

Stick a "return false;" after each alert, like so:

code:

function checkInput(usernameId, emailId, varemaildId) {
     var usernameValue = document.getElementById(usernameId).value;
     var email1= document.getElementById(emailId).value;
     var email2= document.getElementById(varpemailId).value;
     
     if (usernameValue.length <4 || usernameValue.length > 8) {
     	alert("the username must be between 4 and 8 characters long");
     	return false;
     }
	 
     if(email2.length == 0) {
	alert("Please confirm your email");
	return false;
     } 
	      
     if(email1 != email2) {
	alert('The two emails do not match!');
	return false;
     }      
	 
     alert("User name and Email accepted");
     return true;
	 
}

"return <value>" ceases all execution of that function and returns that value, kind of like an "exit function" statement in VB, except it returns a value. So you have a bunch of statements that return false on error and at the very end have a "return true;", if it gets to that point everything is ok and processing should continue.

Just-In-Timeberlake fucked around with this message at 20:18 on Oct 13, 2009

# ¿ Oct 13, 2009 20:13

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.