Email - validating two elements

I’m just starting to learn JavaScript, but there’s one thing I’m hoping to do sooner rather than later and that’s to validate two elements of an email form. With Unni krishnan’s help, I was able to validate a checkbox. However, since I need two validations, would if . . . else if . . . else work? Obviously, I do not have all the pieces, but am I on the right track here?:

if (invalid email address)
{ alert(“Enter valid email address”);
return false; }
else if (! Document.getElementById(“myCheckBox”).checked)
{ alert(“You must verify that you have read the disclaimer.”);
Return false;}
Else {send email}


Here's my code so far:

<form action="http://www.justhost.com/justmail" enctype="multipart/form-data" method="post">

<fieldset>
<legend>Email:</legend>

<span style="line-height: 150%">Name: <input type="text" name="Name"><br>
Email (required): <input type="text" name="mailfrom"><br>
City: <input type="text" name="City"><br>
State: <input type="text" name="State" size="2">
Zip: <input type="text" name="Zip" size="10"><br>
Phone: <input type="text" name="Phone"></span><br><br>
How would you like to be contacted?<br>(check all that apply):<br><input type="checkbox" name="Contact 1" value="Contact by email"> Email
<input type="checkbox" name="Contact 2" value="Contact by phone"> Phone<br><br>

How can we help you?<br>Brief description of your legal issue:<br>
<textarea name="Message" rows="10" cols="30"></textarea><br><br>

The use of the Internet or this form for communication with the firm or any individual member of the firm does not establish an attorney-client relationship. Confidential or time-sensitive information should not be sent through this form.<br>

<input type="checkbox" id="myCheckBox" name="Disclaimer" value="I have read the disclaimer."> I have read the disclaimer. (required)
<input type="hidden" name="sendtoemail" value="mary@marymcmullen.com">
<input type="hidden" name="redirect" value="http://www.marymcmullen.com/index.html">
<input type="hidden" name="subject" value="Email from WebForm">
<input type="submit" value="Send Email" onclick="return validateform()">
</fieldset>
</form>

<script type="text/javascript">
function validateform()
{
if (! document.getElementById("myCheckBox").checked)
{
alert("You must verify that you have read the Disclaimer.");
return false;
}
}
</script>

BTW . . . how do you insert code into separate boxes in these posts?

 

You are pretty much on the right path to making your form validation.

I guess you're having all those "return false;" statements, because you don't want the page to scroll to the top every time you click on the Send Email button, otherwise I don't see any need of them, unless your form is very big and would require the user to scroll down to the field which he got wrong.

About the code insertion you have to click "Go Advanced" instead of "Post Quick Reply" and there you will see a hash tag (#) which when you click on, will give you 2 code tags in which you can paste your source code. The more tags, the more boxes.

 

Hi Alegandro131 . . . I actually don't know why I'm using the "return false" statements. I sort of skimmed through the W3 School the first time and decided to give this a try (taken from the Validation chapter of W3):

function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}

This is how I used it (with some help):

<script type="text/javascript">
function validateform()
{
if (! document.getElementById("myCheckBox").checked)
{
alert("You must verify that you have read the Disclaimer.");
return false;
}
}
</script>

I'm now in the process of going back to the beginning of W3 (and some other sources) and working through things more carefully . . . for one, I need to figure out what "return false" means since I apparently missed it the first time through.

 

Basically what it means is that the function returns false instead of true (if you add that at the end of the function after all the checks).

This return statement can be used when submitting a form (as you have used it), but instead of just returning it you should have another function where you call validateform and based on it's return statement (true or false) you decide whether or not you should continue with submitting the information the user has filled in your form.

The way it is written now it doesn't actually send anything (which you already know I guess), but just returns false when the user hasn't filled out everything correctly. Which as I've said can be used later on when you choose to use the statement returned from the function.

 

The form submits to http://www.justhost.com/justmail (the argument of "action =") when you click the "submit" button, unless the function the button calls returns false. (That would be the validateform() function in your code.) You can keep dropping to "else" statements, checking one element after another, until all of them pass, then return true. If one element is invalid, the function returns false and the form doesn't submit. (Pop up a message inside that "else" construct, before the return, to alert the user of the error.)

Returning true or false has nothing to do with scrolling the form.

 

<script >
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@'); p=val.indexOf('.');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
}

</script>

use this code for both textbox filed and also for email .