|
JavaScript - Form Validate Before Submit To Email
alright so i am trying to validate this form and if you do not fill out the Day of the week then it does not submit the form to email....
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Guest List Signup</title>
<style type="text/css">
<!--
body,td,th {
color: #FFF;
}
body {
background-color: #000;
}
-->
</style></head>
<script type='text/javascript'>
function madeSelection(elem, helperMsg){
if(elem.value == "Select"){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}
</script>
<body bgcolor="#000000" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF">
<form name="halo-gl" form method="POST" action="contactgl.php">
<p>If you want to have your name on the HALO guest list please fill out the form below before 9pm and you and your guests will be on the list at the door.
<p>This will get you free entry* until 11:30pm (this means at 11:31pm the list is over) also on select events there will not be a list and we might not have it posted on the website.
<p>Guest list does not guarantee entry. It is to the discression of Halo on wether someone is permitted or not.
<p>
<p>Your Name:<br>
<input type="text" name="MyName">
(First and Last)
<p>How Many People I Will Have:<br>
<select name="HowManyPeopleIWillHave">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<p>What day to be on the list:<br>
<select id='selection'>
<option value="Select">Please Select</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
<p><input type="submit" name="submit" value='Submit' onclick="madeSelection(document.getElementById('selection'), 'Please Choose Something')" >
</form>
<p>
</body>
</html>
you can see this currently in action at http://www.haloclt.com/guestlist.html any help would be appreciated thank you Similar TutorialsHi! I would like to show you guys the JavaScript that i using for my contact form /*----- Code goes here by clicking the link -----*/ http://web.ezenne.com/js/completeValid.js The above code was copied from a Youtube tutorial about JavaScript. I would like to ask, what additional code should be added in the existing code in order to validate the numbers only and an email format before the form to be submitted? Thanks! Regards, Ezenne Hello all, I have a form that submits a POST request when data is submitted. A Servlet then processes this POST request and a JavaBean is used to make some calculations. The HTML response is not generated within the Servlet but instead I forward the request to a JSP to generate the response. - This all works fine, thankfully. However, I am stupidly suck trying to validate the form on the client side with a JavaScript function before the form is submitted. Here is my index.jps: Code: <%--
Document : index
Created on : 19-Nov-2009, 13:41:30
Author : lk00043
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/JavaScript">
<!-- Start hiding JavaScript Statements
function validateForm() {
var student;
var score1, score2, score3, score4;
student = document.getElementById('student');
s1 = document.getElementById('score1');
s2 = document.getElementById('score2');
s3 = document.getElementById('score3');
s4 = document.getElementById('score4');
score1 = parseInt(s1.value);
score2 = parseInt(s2.value);
score3 = parseInt(s3.value);
score4 = parseInt(s4.value);
if(student.value.length == 0) {
document.getElementById('StudentError1').innerHTML = " Enter a student name!";
return false;
}
if ((isNaN(score1)) || (score1 < 0) || (score1 > 100)) {
document.getElementById('Error1').innerHTML = " Enter a number between 0 and 100!";
return false;
}
if ((isNaN(score2)) || (score2 < 0) || (score2 > 100)) {
document.getElementById('Error2').innerHTML = " Enter a number between 0 and 100!";
return false;
}
if ((isNaN(score3)) || (score3 < 0) || (score3 > 100)) {
document.getElementById('Error3').innerHTML = " Enter a number between 0 and 100!";
return false;
}
if ((isNaN(score4)) || (score4 < 0) || (score4 > 100)) {
document.getElementById('Error4').innerHTML = " Enter a number between 0 and 100!";
return false;
}
}
// End hiding JavaScript Statements -->
</script>
<title>Lab Class 7 - Task 2</title>
</head>
<body>
<h1>Lab Class 7</h1>
<form name="collectgrades" action="AssessGrades" method="POST" onSubmit="validateForm()" >
Name of Student: <input type="text" name="student" id="student"/><span id="StudentError1"> </span><br />
Presentation: <input type="text" name="score" id="score1"/><span id="Error1"> </span><br />
Writing style: <input type="text" name="score" id="score2"/><span id="Error2"> </span><br />
Technical content: <input type="text" name="score" id="score3"/><span id="Error3"> </span><br />
Depth of analysis: <input type="text" name="score" id="score4"/><span id="Error4"> </span><br />
Feedback:<select name="feedback" size="4" multiple="multiple">
<option>"Could be better structured."</option>
<option>"Depth of analysis is good."</option>
<option>"Very advanced material."</option>
<option>"Very well structured."</option>
</select><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Regardless of whether incorrect input is given, the data is still POSTed to the server and calculated on or a Server Side error is given. Am I correct in calling the function onClick? The validation essentially needs to be so that: - Student field contains a string - Score1, Score2, Score3 and Score 4 contain a number between 0 and 100 Any help is most appreciated, Cheers, Beetle. I have this script to validate contact form fields. It works fine for checking that fields are not blank. I added the valid email code, which I copied from the w3schools web site. But, it does not work. I am confused about how to reference the email form field name. That is really the only thing I changed, that is, I added the frm.elements to the email variable. Can anyone please help? Thanks! Code: function validate_form(frm)
{
frm.elements.name.className = "input";
frm.elements.email.className = "input";
frm.elements.subject.className = "input";
frm.elements.comments.className = "input";
var errors=0;
//
// NAME cannot be blanks
//
if (isBlank(frm.elements.name.value)) {
frm.elements.name.className = "inputreq";
errors++;
}
//
// EMAIL ADDRESS cannot be blanks
//
if (isBlank(frm.elements.email.value)) {
frm.elements.email.className = "inputreq";
errors++;
}
//
// SUBJECT cannot be blanks
//
if (isBlank(frm.elements.subject.value)) {
frm.elements.subject.className = "inputreq";
errors++;
}
//
// COMMENTS cannot be blanks
//
if (isBlank(frm.elements.comments.value)) {
frm.elements.comments.className = "inputreq";
errors++;
}
//
// EMAIL ADDRESS appears invalid
//
if (validate_email(frm.elements.email.value,"Not a valid e-mail address!")==false) {
alert("TEST");
frm.elements.email.focus();
return false;
}
//
// Errors
//
if (errors>0) {
alert("Please enter all fields!");
return false;
}
//No errors
//frm.submit();
}
function isBlank(value)
{
regexp = /^\s*$/
return (value==null || regexp.test(value));
}
// Validate email address
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false;}
else {return true;}
}
}
The below code works ok but need our help to get it perfect. I want the function to validate that after the "@" the user types "wendys.com". Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
<SCRIPT>
function validateLP(theForm){
if(theForm.DM_Email){
var checkEmail =theForm.DM_Email.value;
var invalidChars = " /:,;"
if (checkEmail == "") {
alert("Please enter a valid Wendys DM email address.");
theForm.DM_Email.style.backgroundColor='#FFFF99';
theForm.DM_Email.focus();
return false;
}
if (checkEmail != "") { // can be empty
for (i=0; i<invalidChars.length; i++) { // does it contain any invalid characters?
var badChar = invalidChars.charAt(i)
if (checkEmail.indexOf(badChar,0) > -1) {
alert("Please enter a valid Wendys DM email address.");
theForm.DM_Email.style.backgroundColor='#FFFF99';
theForm.DM_Email.focus();
return false;
}
}
var periodPos1 =checkEmail.indexOf(".",1) // there must be one "." symbol
var atPos = checkEmail.indexOf("@",periodPos1-1) // there must be one "." symbol before "@"
var periodPos2 = checkEmail.indexOf(".",atPos)
//periodPos2 = checkEmail.indexOf(".",atPos)
if ( (atPos == -1) || (periodPos2 == -1)){
//return false
alert("Please enter a valid Wendys DM email address.");
theForm.DM_Email.style.backgroundColor='#FFFF99';
theForm.DM_Email.focus();
return false;
}
}
}
}
</SCRIPT>
</head>
<body>
<form method="POST" NAME="theForm" onSubmit="return validateLP(theForm)" action="--WEBBOT-SELF--">
<p><input type="text" name="DM_Email" size="20"></p>
<p> </p>
<p> </p>
<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
</body>
</html>
Hello: I have an expression validating email addresses but it seems there is a loophole. If a user enters a comma this is accepted. Can anyone tell me how i can modify the following to disallow commas? validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i; strEmail = document.form1.df_email1.value; if (strEmail.search(validRegExp) == -1) { alert("A valid e-mail address is required."); document.form1.df_email1.focus(); return false; } Hi, I want to check the email address type in a contact form but want to reject it if it's from a certain domain I actually use this regexp : /^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/ (taken from the jquery validationengine) to check if the email address is correctly formated but I'd like to reject it if contains hotmail between the @ and the . I tried many things but couldn't get something that works. If anyone has an idea, it would be greatly appreciated. Chag here is my current email validation code: function validateEmail(strValue) { var objRegExp = /(^[a-z]([a-z_\.]*)@([a-z_\.]*)([.][a-z]{3})$)|(^[a-z]([a-z_\.]*)@([a-z_\.]*)(\.[a-z]{3})(\.[a-z]{2})*$)/i; return objRegExp.test(strValue); } what should i add to reject email addresses from hotmail.com and yahoo.com? Hi there, I would like to validate the email address typed into the prompt message by the user, but to no avail. Can some kind soul help? Code: function addOption()
{
var new = prompt("Enter New Item:");
if (!new == "")
{
var answer = confirm ("Are you sure you want to add? ")
if (answer)//if answer is true
{
var lst = document.getElementById('lstBx'); // listbox control id
// Now we need to create a new 'option' tag to add to MyListbox
for (var i = 0; i < lst.options.length; i++)
{
arrTexts = lst.options[i].text;
if (arrTexts.toLowerCase() == newItem.toLowerCase())
{
alert ("That email address is already included in the list - please enter another one.");
break;
}
else
{
validRegExp = /^[^@]+@[^@]+.[a-z]{2,}$/i;
strEmail = lst.value;
// search email text for regular exp matches
if (strEmail.search(validRegExp) == -1)
{
alert('A valid e-mail address is required.\nPlease retry.');
return false;
}
var optionNew = document.createElement("option");
optionNew.value = new; // The value that this option will have
optionNew.innerHTML = new; // The displayed text inside of the <option> tags
// Finally, add the new option to the listbox
lst.appendChild(optionNew);
//sort items in listbox in alpha order
arrTexts = new Array();
for(i=0; i<lst.length; i++)
{
arrTexts[i] = lst.options[i].text;
}
arrTexts.sort();
for(i=0; i<lst.length; i++)
{
lst.options[i].text = arrTexts[i];
lst.options[i].value = arrTexts[i];
}
}
return false;
}
}
}
else
{
if(new == "")
{
alert("Key something to textbox please.");
}
else
alert("Cancelled.");
}
}
Code: <select id="lstBx" name="listBox" size="6" style="width: 580px;">
<option>a@hotmail.com</option>
<option>b@hotmail.com</option>
<option>c@yahoo.com</option>
<option>d@gmail.com</option>
<option>e@ymail.com</option>
<option>f@msn.com</option>
</select>
I am trying to make validation for a form but the bit I am stuck on now is: Code: <input class="submit" type="submit" value="Submit" id="submit" name="submit" onclick="return validate();" /> Do I have to add 'verify' instead of the 'validate' I mean is this a set thing in JS as I want it to go to the JavaScript code which is validate.js I should add that the form is XHTML and there is also a captcha with it. So I would not know how to add the onsubmit to the beginning of the form. Please see my Booking Form here http://www.n-v-m.co.uk/Booking.html The form is very nearly finished but I have no experience with JavaScript at all so I am hoping somebody can tell me how to do the finishing touches. All I require is: 1- On clicking the 'Submit order' button I would like the browser to check to see if the 'Is Vehicle roadworthy with full M.O.T.:' List/Menu is set to 'Yes' and if not it needs to return an alert stating it must be set to 'Yes' to proceed... Somebody kindly helped show me how to do the alert before so this is working, but, the problem at the moment is after clicking 'OK' to close the alert, the form is still submitted. At this point instead of the form being submitted I would just like the browser to return to the form. 2- There is a checkbox on the bottom of the form that states 'I agree with the Terms and Conditions'... To be able to proceed with a booking I need the customer to check the box... On clicking 'Submit order' if the box isn't checked I would like an alert to appear and the form not to be submitted. 3. When both the above criteria have been met and the form is ready to submit... I would like the browser to re-direct to http://www.n-v-m.co.uk/Thankyou.html which is a page I have already created on my server. Thanks for taking your time to read this... If it helps I have posted both my HTML and PHP codes below: Booking.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>National Vehicle Movements - Booking Form</title>
<style type="text/css">
<!--
body {
background-color: #1d255f;
margin: 0px;
padding: 0px;
}
#apDiv1 {
position:absolute;
width:487px;
height:706px;
z-index:auto;
left: 50%;
top: 433px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-align: center;
textarea-align: center;
background-position: center;
margin-left: -244px;
}
-->
</style>
<script type='text/javascript'>
function isValid() {
var box = document.getElementById('Is Vehicle Roadworthy with Full M.O.T.');
if(box.value = 'no') {
alert('The vehicle must be roadworthy with full M.O.T');
return false;
}
}
</script>
</head>
<body>
<div align="left">
<div id="apDiv1">
<form id="form1" name="form1" method="post" action="sendform.php" onsubmit='validatethis()'>
<table width="400" border="0" align="center">
<tr>
<td width="193" align="right">Company:</td>
<td width="197" align="left"><input type="text" name="company" id="Company" /></td>
</tr>
<tr>
<td align="right">Name:</td>
<td align="left"><input type="text" name="name" id="Name" /></td>
</tr>
<tr>
<td align="right">Phone Number:</td>
<td align="left"><input type="text" name="phonenum" id="Phone Number" /></td>
</tr>
<tr>
<td align="right">Email Address:</td>
<td align="left"><input type="text" name="email" id="Email" /></td>
</tr>
<tr>
<td align="right">Vehicle Make and Model:</td>
<td align="left"><input type="text" name="vmam" id="Vehicle Make and Model" /></td>
</tr>
<tr>
<td align="right">Vehicle Reg./Ref. No.:</td>
<td align="left"><input type="text" name="vreg" id="Vehicle Reg." /></td>
</tr>
<tr>
<td align="right">Collection Address including Postcode:</td>
<td align="left"><textarea name="colladd" rows="4" id="Collection Address"></textarea></td>
</tr>
<tr>
<td align="right">Collection Contact Name:</td>
<td align="left"><input type="text" name="collconname" id="Collection Contact Name" /></td>
</tr>
<tr>
<td align="right">Collection Contact Number:</td>
<td align="left"><input type="text" name="collconnum" id="Collection Contact Number" /></td>
</tr>
<tr>
<td align="right">Delivery Address including Postcode:</td>
<td align="left"><textarea name="deladd" rows="4" id="Delivery Address"></textarea></td>
</tr>
<tr>
<td align="right">Delivery Contact Name:</td>
<td align="left"><input type="text" name="delconname" id="Delivery Contact Name" /></td>
</tr>
<tr>
<td align="right">Delivery Contact Number:</td>
<td align="left"><input type="text" name="delconnum" id="Delivery Contact Number" /></td>
</tr>
<tr>
<td align="right">Collection Date/Time:</td>
<td align="left"><input type="text" name="collectiondt" id="Collection Date/Time" /></td>
</tr>
<tr align="center">
<td colspan="2" valign="top"><em>(if possible please give a time window eg. '7th - 9th August' and we will arrange collection for you)</em></td>
</tr>
<tr>
<td align="right">Delivery Date/Time:</td>
<td align="left"><input type="text" name="deliverydt" id="Delivery Date/Time" /></td>
</tr>
<tr align="center">
<td colspan="2" valign="top"><em>(if possible please give a time window eg. '7th - 9th August' and we will arrange delivery for you)</em></td>
</tr>
<tr>
<td align="right">Is Vehicle Taxed:</td>
<td align="left"><select name="Taxed" id="Is Vehicle Taxed">
<option>Yes</option>
<option selected="selected">No</option>
</select></td>
</tr>
<tr>
<td align="right">Is Vehicle roadworthy with full M.O.T.:</td>
<td align="left"><select name="mot" id="Is Vehicle Roadworthy with Full M.O.T.">
<option>Yes</option>
<option selected="selected">No</option>
</select></td>
</tr>
<tr>
<td align="right">Billing Address:</td>
<td align="left"><textarea name="billadd" rows="3" id="Billing Address"></textarea></td>
</tr>
<tr align="center">
<td colspan="2" valign="top"><em>(if same as collection or delivery address please enter 'collection' or 'delivery')</em></td>
</tr>
<tr>
<td align="right">Your Ref./Order No. (if any):</td>
<td align="left"><input type="text" name="custordnum" id="Customer Ref./Order No." /></td>
</tr>
<tr>
<td align="right">Any additional comments:</td>
<td align="left"><textarea name="addcom" rows="3" id="Any additional comments"></textarea></td>
</tr>
<tr align="center" valign="middle">
<td colspan="2">
<p>
<input type="checkbox" name="checkbox" id="checkbox" />
I agree with the <u><a href="Terms.html">Terms and Conditions</a></u></strong></p>
<p> </p></td>
</tr>
<tr align="center">
<td colspan="2"><input type="submit" name="button" id="button" value="Submit order" onclick="isValid()" />
<input type="reset" name="button2" id="button2" value="Reset form" /></td>
</tr>
</table>
</form>
</div>
</div>
<div align="center"><img src="images/Booking_03.jpg" width="680" height="1352" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="36,155,158,173" href="index.html" alt="Home" />
<area shape="rect" coords="29,174,151,189" href="Prices.html" alt="Prices" />
<area shape="rect" coords="475,191,578,206" href="mailto:info@n-v-m.co.uk" alt="Email us" />
</map>
</div>
</body>
</html>
sendform.php Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
<?php
$Name = $_POST['name']; //senders name
$to = "info@n-v-m.co.uk"; //recipient
$subject = "Order from ".$_POST['company']." (".$_POST['name'].")"; //subject
$message = $_POST['company']."|".$_POST['name']."|".$_POST['phonenum']."|".$_POST['email']."|".$_POST['vmam']."|".$_POST['vreg']."|".$_POST['colladd']."|".$_POST['collconname']."|".$_POST['collconnum']."|".$_POST['deladd']."|".$_POST['delconname']."|".$_POST['delconnum']."|".$_POST['collectiondt']."|".$_POST['deliverydt']."|".$_POST['Taxed']."|".$_POST['billadd']."|".$_POST['custordnum']."|".$_POST['addcom']; //mail body
$from = "NVM Booking Form"; //
$headers = "From: ".$from."\r\n"; //optional headerfields
mail($to, $subject, $message, $headers); //mail command :) you can add any variable here... I know you have so many, but it is possible...
if(mail)
echo "Booking confirmed. Thank You!";
else
echo "Sorry We Can't Proceed, Please Try After Some Time!";
?>
</BODY>
</HTML>
hello i am trying to do a validation form but i ended up with one that only works for chrome, not on IE not on Firefox! don't know why!!! and another problem it looks like that the return false doesn't even work, it proceeds to the next page anyway [HTML]function validate_required(field,alerttxt) { with (field) { if (value==null||value=="-1") { alert(alerttxt); return false; } else { return true; } } } /*function alertt(thisform) {alert(thisform);}*/ function validate_form(thisform) { //alert('hi'); with (thisform) { if (validate_required(i_am_a,"i_am_a must be filled out!")=="-1") {i_am_a.focus(); return false;} } [/HTML] [HTML]<form method="post" action="index.php?page=step2" onsubmit="return validate_form(i_am_a.options[i_am_a.selectedIndex].value);"> <table class="text"> <tr> <td class="text">أنا</td> <td> <select name="i_am_a" id="i_am_a"> <!--onchange="validate_form(i_am_a.options[i_am_a.selectedIndex].value);">--> <option selected value="-1">الرجاء التحديد</option> <option value="MSW">رجل يبحث عن إمرأة</option> <option value="WSM">إمرأة تبحث عن رجل</option> </select> </td> </tr><tr class="submit"> <td> </td> <td> <input type="submit" value="إنضمم الآن مجانا" /> </td> </tr> </table> </form>[/HTML] This is what I have so far, it is a template I copied from my working E-mail validation. I'm assuming I have to make it so it's just an array of numbers but I really don't know Java too well. Essentially I just want numbers only to be accepted into the phone field. Code: else if(fieldType == 'phone')
{
if((required == 1 && fieldObj.value=='') || (fieldObj.value!='' && !validate_phone(fieldObj.value)))
{
fieldObj.setAttribute("class","mainFormError");
fieldObj.setAttribute("className","mainFormError");
fieldObj.focus();
return false;
}
}
function validate_phone(phoneStr)
{
apos=phoneStr.indexOf("@");
if (apos<1||dotpos-apos<2)
{
return false;
}
else
{
return true;
}
}
I created a form and validation to ensure that it is fully filled out, then once it is filled out properly, it should automatically go to the confirmation page. The way it works right now is that it does work properly, except if the error alert pops up it will then navigate to the confirmation page anyways, and that page will be blank. I have it setup with this in the form: Code: <form name = "orderForm" action="confirmOrder.html" onsubmit= "validateOrder()"> I need it to stop on error, and not let you continue to confirmOrder.html unless filled out right. Hello in "validateField" function radio is not exists and I don't know how can I add a validation rule for radio buttons. please help me . my code is attached. thank you hello cant get my head around this..i had a form posting data to my sql database but it would show the thank you using {if} ect so created java vaildation script what points it to ?action=registered showing thank you message but it not submitting to sql or sending notification email?? can any one help me? thanks dan thanks Hi all, I'm designing something to addon to an existing product. I'm struggling with some javascript problems. I want to submit a hidden field when you click on an image button, rather than it being an actual submit button. It's going to submit the value "1" to a PHP page, but I don't want it to actually have to GO to the PHP page, just submit it within the webpage. Is this possible? Thanks Good day. This form is working, but I want to make the "What AIS services are you interested in?" multiple selection a "required field". The other required fields are working, but I can't figure out how to make this field "required". Code: <blockquote><h2>Request More Information:</h2>
<script type="text/javascript">
function MM_validateForm() { //v4.0
if (document.getElementById){
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=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { 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>
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" onsubmit="MM_validateForm('first_name','','R','last_name','','R','email','','RisEmail','company','','R','phone','','RisNum');return document.MM_returnValue"><input type="hidden" name="oid" value="00Dd0000000cnUc" />
<input type="hidden" name="retURL" value="http://aissolutions.ca/thank-you" />
<p style="float:left;width:350px"><label for="first_name">First Name <span style="color:#f00">(required)</span></label><input id="first_name" type="text" name="first_name" size="50" maxlength="40" /></p>
<p style="float:left;width:350px"><label for="last_name">Last Name <span style="color:#f00">(required)</span></label><input id="last_name" type="text" name="last_name" size="50" maxlength="80" /></p>
<p style="float:left;width:350px"><label for="email">Email <span style="color:#f00">(required)</span></label><input id="email" type="text" name="email" size="50" maxlength="80" /></p>
<p style="float:left;width:350px"><label for="company">Company <span style="color:#f00">(required)</span></label><input id="company" type="text" name="company" size="50" maxlength="40" /></p>
<p style="float:left;width:350px"><label for="phone">Phone <span style="color:#f00">(required)</span></label><input id="phone" type="text" name="phone" size="50" maxlength="40" /></p>
<p style="float:left;width:350px">Best Time To Call:<select style="width:325px" id="00Nd0000004F2Mb" name="00Nd0000004F2Mb" title="Best Time To Call"><option value="">--None--</option><option value="9:00am to 12:00pm">9:00am to 12:00pm</option>
<option value="1:00pm to 5:00pm">1:00pm to 5:00pm</option>
<option value="6:00pm to 9:00pm">6:00pm to 9:00pm</option>
</select></p>
<p style="clear:left;float:left;width:350px"><label for="street">Address</label><br>
<textarea name="street" cols="47"></textarea></p>
<p style="float:left;width:350px">What AIS services are you interested in?:<select style="width:325px" id="00Nd00000043aHr" multiple="multiple" name="00Nd00000043aHr" title="What AIS services are you interested in?"><option value="Bookkeeping">Bookkeeping</option>
<option value="Business Incorporation">Business Incorporation</option>
<option value="Catch Up/Clean Up Records">Catch Up/Clean Up Records</option>
<option value="Job Costing">Job Costing</option>
<option value="Part Time CFO">Part Time CFO</option>
<option value="Software Conversion">Software Conversion</option>
<option value="Software Customization">Software Customization</option>
<option value="Software Training">Software Training</option>
<option value="Tax Services">Tax Services</option>
</select></p>
<p style="float:left;width:350px">Anything else you think we should know:<br>
<textarea id="00Nd0000004E2rs" name="00Nd0000004E2rs" cols="47"></textarea></p>
<p style="clear:left;float:left"><input type="submit" name="submit" /></p>
Thanks. I am Gururaj. I have written a form in HTML which contains username,lastname,email,password and submit. I have written a javascript to validate this form [validate(username,lastname,email,password)]. On submit this javascript function will be called and hence form get validated. I am passing all the arguements(username,lastname,email and password) to the javascript function.. Is it possible to make me a code such that it should call an individual function for each field in the form.for ex:if i have not entered username, last name in the form and attempt to submit, only username arguement should be passed to the function as it comes first in the form. In other sense i want to validate individual text field validation of my form. So can anybody help me.It will be very needful to me. I've literally tried everything. Read 26 tutorials, interchanged code, etc. My validation functions all work. My AJAX functions work (tested manually using servlet URL's). The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes. I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return. html form: Code: <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post">
<table cellspacing="5" style="border: 2px solid black;">
<tr>
<td valign="top">
<table cellspacing="5">
<tr>
<td>*First name</td>
<td align="right"><span id="valid_one"></span></td>
<td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td>
</tr>
<tr>
<td align="left">*Last name</td>
<td align="right"><span id="valid_two"></span></td>
<td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td>
</tr>
<tr>
<td align="left">*Email address</td>
<td align="right"><span id="result"></span></td>
<td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td>
</tr>
<tr>
<td align="left">*Phone number</td>
<td align="right"><span id="valid_three"></span></td>
<td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td>
</tr>
<tr>
<td align="left">*City/Town</td>
<td align="right"><span id="valid_four"></span></td>
<td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<select name="s">
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DE">Delaware
<option value="FL">Florida
<option value="GA">Georgia
<option value="HI">Hawaii
<option value="ID">Idaho
<option value="IL">Illinois
<option value="IN">Indiana
<option value="IA">Iowa
<option value="KS">Kansas
<option value="KY">Kentucky
<option value="LA">Louisiana
<option value="ME">Maine
<option value="MD">Maryland
<option value="MA">Massachusetts
<option value="MI">Michigan
<option value="MN">Minnesota
<option value="MS">Mississippi
<option value="MO">Missouri
<option value="MT">Montana
<option value="NE">Nebraska
<option value="NV">Nevada
<option value="NH">New Hampshire
<option value="NJ">New Jersey
<option value="NM">New Mexico
<option value="NY">New York
<option value="MC">North Carolina
<option value="ND">North Dakota
<option value="OH">Ohio
<option value="OK">Oklahoma
<option value="OR">Oregon
<option value="PA">Pennsylvania
<option value="RI">Rhode Island
<option value="SC">South Carolina
<option value="SD">South Dakota
<option value="TN">Tennessee
<option value="TX">Texas
<option value="UT">Utah
<option value="VT">Vermont
<option value="VA">Virginia
<option value="WA">Washington
<option value="WV">West Virginia
<option value="WI">Wisconsin
<option value="WY">Wyoming
</select>
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td><span id="error"></span></td>
</tr>
<tr>
<td valign="top">*Anti-Spam Verification</td>
<td></td>
<td id="reCaptcha"></td>
</tr>
</table>
</td>
<td valign="top">
<table cellspacing="5">
<tr>
<td align="left">*Affiliation</td>
<td align="right"><span id="valid_five"></span></td>
<td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td>
</tr>
<tr>
<td align="left">*Research Area:</td>
<td align="right"><span id="valid_six"></span></td>
<td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td>
</tr>
<tr>
<td valign="top" align="left">*Research Overview</td>
<td align="right"><span id="valid_seven"></span></td>
<td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td>
</tr>
<tr>
<td></td>
<td></td>
<td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td>
</tr>
<tr>
<td align="left">*Talk Availability</td>
<td></td>
<td>
<input type="radio" name="ta" value="In person">In person
<input type="radio" name="ta" value="Online">Online
<input type="radio" name="ta" value="Both" checked>Both
</td>
</tr>
<tr>
<td align="left" valign="top">Links</td>
<td></td>
<td>
<table id="linkTable" border="0">
<td><input type="text" style="width: 320px;" name="link"></td>
<td><div id="result"></div></td>
</table>
</td>
<td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td>
</tr>
<tr>
<td></td>
<td><span style="color: red;"></span></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<input type="submit" id="submit" name="submit" value="Submit Form">
</form>
Javascript file: Code: /*
* script.js - ajax and table functions
*/
var xmlHttp; // global instance of XMLHttpRequest
var xmlHttp2; // second for captcha functions
var validAjax = new Boolean();
var validCaptcha = new Boolean();
var valid_one = new Boolean();
var valid_two = new Boolean();
var valid_three = new Boolean();
var valid_four = new Boolean();
var valid_five = new Boolean();
var valid_six = new Boolean();
var valid_seven = new Boolean();
function init() {
showRecaptcha('reCaptcha');
// Separate booleans for AJAX funcs
validAjax = false;
validCaptcha = false;
// Booleanse for fields that don't require servlet validation
valid_one = false;
valid_two = false;
valid_three = false;
valid_four = false;
valid_five = false;
valid_six = false;
valid_seven = false;
}
function showRecaptcha(element) {
Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field});
}
function validate_form() {
if (valid_one && valid_two && valid_three && valid_four && validEmail) {
startCaptchaRequest();
if (validCaptcha) {
return true;
}
}
else {
alert("Submission contains errors. Please fill out all required fields before submitting.");
return false;
}
}
function validate_one() {
if (document.getElementById("fn").value == 0) {
valid_one = false;
document.getElementById("valid_one").innerHTML = "No";
}
else {
valid_one = true;
document.getElementById("valid_one").innerHTML = "";
}
}
function validate_two() {
if (document.getElementById("ln").value == 0) {
valid_two = false;
document.getElementById("valid_two").innerHTML = "No";
}
else {
valid_two = true;
document.getElementById("valid_two").innerHTML = "";
}
}
function validate_three() {
if (document.getElementById("pn").value == 0) {
valid_three = false;
document.getElementById("valid_three").innerHTML = "No";
}
else {
valid_three = true;
document.getElementById("valid_three").innerHTML = "";
}
}
function validate_four() {
if (document.getElementById("c").value == 0) {
valid_four = false;
document.getElementById("valid_four").innerHTML = "No";
}
else {
valid_four = true;
document.getElementById("valid_four").innerHTML = "";
}
}
function validate_five() {
if (document.getElementById("affl").value == 0) {
valid_five = false;
document.getElementById("valid_five").innerHTML = "No";
}
else {
valid_five = true;
document.getElementById("valid_five").innerHTML = "";
}
}
//
//function validate_six() {
// if (document.getElementById("ra").value == 0) {
// valid_six = false;
// document.getElementById("valid_six").innerHTML = "No";
// }
// else {
// valid_six = true;
// document.getElementById("valid_six").innerHTML = "";
// }
//}
//
//function validate_seven() {
// if (document.getElementById("ro").value == 0) {
// valid_seven = false;
// document.getElementById("valid_seven").innerHTML = "No";
// }
// else {
// valid_seven = true;
// document.getElementById("valid_seven").innerHTML = "";
// }
//}
function addLink(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "link" + rowCount;
element1.style.width = "320px";
cell.appendChild(element1);
}
function limitText(limitField, limitCount, limitNum) {
if (limitField.value.length > limitNum) {
limitField.value = limitField.value.substring(0, limitNum);
}
else {
limitCount.value = limitNum - limitField.value.length;
}
}
function createXmlHttpRequest() {
if(window.ActiveXObject) {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
}
function startRequest() {
createXmlHttpRequest();
var param1 = document.getElementById('mailfield').value;
if (param1 == "") {
validEmail = false;
document.getElementById("result").innerHTML = "Blank";
}
else {
xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true)
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.send(null);
}
}
function handleStateChange() {
if(xmlHttp.readyState==4) {
if(xmlHttp.status==200) {
var message =
xmlHttp.responseXML
.getElementsByTagName("valid")[0]
.childNodes[0].nodeValue;
if (message == "Unregistered") {
validEmail = true;
document.getElementById("result").style.color = "green";
}
else {
validEmail = false;
document.getElementById("result").style.color = "red";
}
document.getElementById("result").innerHTML = message;
}
else {
alert("Error checking e-mail address - " + xmlHttp.status +
" : " + xmlHttp.statusText);
}
}
}
function createCaptchaRequest() {
if(window.ActiveXObject) {
xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest) {
xmlHttp2=new XMLHttpRequest();
}
}
function startCaptchaRequest() {
alert('made it to captcha requeswt');
createCaptchaRequest();
var param1 = Recaptcha.get_challenge();
var param2 = Recaptcha.get_response();
xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true)
xmlHttp2.onreadystatechange = handleStateChangeCaptcha;
xmlHttp2.send(null);
}
function handleStateChangeCaptcha() {
if(xmlHttp2.readyState==4) {
if(xmlHttp2.status==200) {
var message =
xmlHttp2.responseXML
.getElementsByTagName("result")[0]
.childNodes[0].nodeValue;
if (message == "Valid") {
alert("captcha valid");
validCaptcha = true;
}
else {
document.getElementById("error").innerHTML = message;
validCaptcha = false;
}
}
else {
alert("Error checking captcha validity - " + xmlHttp2.status +
" : " + xmlHttp2.statusText);
}
}
}
|
|||||||