|
JavaScript - Form Using Inline Validation
Hi all,
i have created one simple login form with 5 fields namely username,email id,password,retype password and phone no.and i have created one alert message for each function so that it displays alert message when there is an error. now i want to replace alert message with INLINE VALIDATION(displays beside text only).... kindly tell me how to do.... below is the code i have written using alert message....... Code: <html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">
function checkName(form)
{
var sRealname = form.realname.value;
var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
var isCorrectFormat = oRE.test(sRealname);
if (!isCorrectFormat)
{
alert("Incorrect format.");
textbox.select();
textbox.focus();
return false;
}
else
{
alert("Correct format");
return true;
}
if (sRealName == '')
{
alert('Error: Username cannot be blank!');
form.realname.focus();
return false;
}
else if (sRealName.length < 4)
{
alert("UserName should be atleast 4 characters long");
return false;
}
return true;
}
function checkEmail(form) /* for email validation */
{
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))
{
return true;
}
alert('Invalid E-mail Address! Please re-enter.');
return false;
}
function validatePwd(form) /* password & retype-password verification */
{
var invalid = ' ';
minLength = 6;
var pw1 = form.password.value;
var pw2 = form.password2.value;
if (pw1 == '' || pw2 == '')
{
alert('Please enter your password twice.');
return false;
}
if (form.password.value.length < minLength)
{
alert('Your password must be at least ' + minLength + ' characters long. Try again.');
return false;
}
if (document.form.password.value.indexOf(invalid) > -1)
{
alert('Sorry, spaces are not allowed.');
return false;
}
else
{
if (pw1 != pw2)
{
alert('You did not enter the same new password twice. Please re-enter your password.');
return false;
}
else
{
alert('Passwords Match.');
return false;
}
return false;
}
}
function validPhone(form) /* phone no validation */
{
var valid = '0123456789';
phone = form.phoneno.value;
if (phone == '')
{
alert('This field is required. Please enter phone number');
return false;
}
if (!phone.length > 1 || phone.length < 10)
{
alert('Invalid phone number length! Please try again.');
return false;
}
for (var i = 0; i < phone.length; i++)
{
temp = '' + phone.substring(i, i + 1);
if (valid.indexOf(temp) == -1)
{
alert('Invalid characters in your phone. Please try again.');
return false;
}
}
return true;
}
function validate()
{
var form = document.forms['form'];
if (!checkName(form) || !checkEmail(form) || !validatePwd(form) || !validPhone(form))
{
return false;
}
return true;
}
</script>
</head>
<body>
<form action="" method="post" name="form" onsubmit="return validate()">
User Name : <input type="text" name="realname" size="19">
<br>
E-Mail : <input type="text" name="email" size="25">
<br>
Password : <input type="password" name="password" maxlength="12" size="25">
<br>
Retype password: <input type="password" name="password2" maxlength="12" size="25">
<br>
PhoneNo : <input type="phoneno" name="phoneno" maxlength="10" size="25">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Similar TutorialsHello all, new here Seems like a very nice place to be apart of. I have my website www.gebcn.com. If you view source you will see all that I have done, but more importantly my problem. I have the JS code at the top there and I am unable to W3C validate my HTML because of the JS. I am using XHTML strict and would like to stay using it. The JS I have at the top is my form validation code. I am able to do any validating that I need with this "snippet" of code, I have shrank it from my library version just to use for this newsletter. Until now W3C validating was not important now for some reason it is and I am faced with this problem. I am not a Javascript guy more of a HTML/CSS guy and I can manipulate JS to suit my needs. <problem> I have tried to make this "snippet" of JS code an external file but receive multiple errors with the JS calling for the FORM NAME as it is not on the same page. The form NAME=NEWSLETTER is another problem, as W3C says I am unable to use attribute "NAME" in this location. <problem> I would like to keep the JS close to how it is now as I have a library to use this JS over and over again. Any pointers in the right direction or solutions to my problem would be greatly appreciated. Thanks! Hopefully it is not to hard huh If there is anything anyone needs, the code pasted here, or anything else please let me know. Thanks again! 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);
}
}
}
Hello all, I have a multistep jquery form that validates user input and then should send me an email. Problem is, right now, I can only get it to validate the first page, then it sends the email before the rest of the pages are viewed. I'm just trying to delay the submission of the form until the "submit_fourth" button is pressed. I've got $25 via paypal for the one who sticks with this one for long enough to come up with a workable solution. Here is my code... I know it's a lot, but I wasn't sure how much would be helpful. HTML code is in the second post in this thread (it was just too much to fit in one go). Cheers! -Dave The Javascript: Code: $(function validateForm(){
//original field values
var field_values = {
//id : value
'name' : 'your name',
'email' : 'email',
'phone' : '(555) 123-4567',
'other' : 'other',
'detail' : 'project overview'
};
//inputfocus
$('input#name').inputfocus({ value: field_values['name'] });
$('input#email').inputfocus({ value: field_values['email'] });
$('input#phone').inputfocus({ value: field_values['phone'] });
$('input#other').inputfocus({ value: field_values['other'] });
$('input#detail').inputfocus({ value: field_values['detail'] });
//reset progress bar
$('#progress').css('width','0');
$('#progress_text').html('0% Complete');
//first_step
$('form').submit(function(){ });
$('#submit_first').click(function(){
//remove classes
$('#first_step input').removeClass('error').removeClass('valid');
//ckeck if inputs aren't empty
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var fields1 = $('#first_step input[type=text]');
var error = 0;
fields1.each(function(){
var value = $(this).val();
if( value.length<5 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(error <= 0) {
//update progress bar
$('#progress_text').html('25% Complete');
$('#progress').css('width','85px');
//slide steps
$('#first_step').slideUp();
$('#second_step').slideDown();
} else
return false;
});
$('#back_second').click(function(){
//update progress bar
$('#progress_text').html('0% Complete');
$('#progress').css('width','0px');
//slide steps
$('#second_step').slideUp();
$('#first_step').slideDown();
});
$('#submit_second').click(function(){
//remove classes
$('#second_step input').removeClass('error').removeClass('valid');
var fields2 = $('#second_step input[textarea]');
var error = 0;
fields2.each(function(){
var value = $(this).val();
if( value.length<5 || value==field_values[$(this).attr('id')] ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(error <= 0) {
//update progress bar
$('#progress_text').html('50% Complete');
$('#progress').css('width','170px');
//slide steps
$('#second_step').slideUp();
$('#third_step').slideDown();
} else
return false;
});
$('#back_third').click(function(){
//update progress bar
$('#progress_text').html('25% Complete');
$('#progress').css('width','85px');
//slide steps
$('#third_step').slideUp();
$('#second_step').slideDown();
});
$('#submit_third').click(function(){
//update progress bar
$('#progress_text').html('75% Complete');
$('#progress').css('width','255px');
//prepare the fourth step
var fields3 = new Array(
$('#time').val(),
$('#budget').val()
);
var fields2half = new Array(
$('#detail').val()
);
var fields2 = new Array(
$('#other').val(),
$('#pages').val()
);
var fields1 = new Array(
$('#name').val(),
$('#email').val(),
$('#phone').val(),
$('#contact').val(),
$('#url').val()
);
var tr = $('#fourth_step tr');
tr.each(function(){
//alert( fields[$(this).index()] )
$(this).children('.1 td:nth-child(2)').html(fields1[$(this).index()]);
$(this).children('.2 td:nth-child(2)').html(fields2[$(this).index()]);
$(this).children('.2half td:nth-child(2)').html(fields2half[$(this).index()]);
$(this).children('.3 td:nth-child(2)').html(fields3[$(this).index()]);
});
//slide steps
$('#third_step').slideUp();
$('#fourth_step').slideDown();
});
$('#back_fourth').click(function(){
//update progress bar
$('#progress_text').html('50% Complete');
$('#progress').css('width','170px');
//slide steps
$('#fourth_step').slideUp();
$('#third_step').slideDown();
});
$('#submit_fourth').click(function(){
//send information to server
//update progress bar
$('#progress_text').html('100% Complete');
$('#progress').css('width','339px');
//slide steps
$('#fifth_step').slideUp();
$('#fourth_step').slideDown();
if(error <= 0) {
return true
}
else{
return false
}
});
});
Hi guys, Been stuck for a few days with this scenario. Any help? The alert box appears on an error. But the submitting won't stop. The details are submitted and the form is processed. Any help is greatly appreciated... Code: <html>
<head>
<script type="text/javascript" src="email_helper/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "simple"
});
</script>
<script language="javascript">
function MM_openBrWindow(theURL,winName,features) {
window.open(theURL,winName,features);
}
function err_check(){
var email = document.getElementById('to_email').value;
if(email.length==0){
alert('Please Enter Email Address');
return false;
}
var AtPos = email.indexOf("@")
var StopPos = email.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
alert("Please Enter Valid Email Address");
document.getElementById('email').focus();
return false;
}
email = document.getElementById('cc_email').value;
if(email.length != 0){
var AtPos = email.indexOf("@")
var StopPos = email.lastIndexOf(".")
if (AtPos == -1 || StopPos == -1) {
alert("Please Enter Valid Email Address");
document.getElementById('email').focus();
return false;
}
}
var answer = confirm ("Send E-Mail?");
if (!answer){
return false;
}
}
</script>
<!-- /TinyMCE -->
<style type="text/css">
body, table, td, th{
background-color:#CCCCCC;
font-family: Arial;
font-size:14px;
}
.que{
font-weight:bold;
}
</style>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<?php
include 'library/database.php';
include 'library/opendb.php';
$query = mysql_query("SELECT email,contact,mobile FROM users WHERE user_id='$uid'") or die(mysql_error());
$row = mysql_fetch_row($query);
$from_email = $row[0];
$from_person = $row[1];
$from_mobile = $row[2];
$query = mysql_query("SELECT customer_id FROM campaign_summary WHERE camp_id='$camp_id'") or die(mysql_error());
$row = mysql_fetch_row($query);
$cusid = $row[0];
$query = mysql_query("SELECT email FROM client_info WHERE comp_id='$cusid'") or die(mysql_error());
$row = mysql_fetch_row($query);
$toer = $row[0];
include 'library/closedb.php';
?>
<table width="100%" border="0">
<tr><td rowspan="4"><input type="submit" name="send_email" id="send_email" style="height:50px; width:100px;" value="SEND" onClick="return err_check();" /></td><td><span class="que">From : </span></td><td colspan="3"><?php echo $from_email; ?><input type="hidden" name="from_mail" id="from_mail" /><input type="hidden" name="camp_id" id="camp_id" value="<?php echo $camp_id;?>"/></td></tr>
<tr><td><span class="que">To : </span></td><td colspan="3"><input name="to_email" id="to_email" style="width:250px;" value="<?php echo $toer;?>"/></td></tr>
<tr><td><span class="que">CC : </span></td><td colspan="3"><input name="cc_email" id="cc_email" style="width:250px;"/></td></tr>
<tr><td><span class="que">Subject : </span></td><td colspan="3"><input style="width:300px;" name="subject" id="subject" /></td></tr>
<tr><td rowspan="1" colspan="2"> </td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" checked /> PDF Quotation</td><td> </td><td> </td></tr><tr><td colspan="2"><span class="que">Credit Application</span></td><td><input type="checkbox" name="corporate" id="corporate"/>Corporate</td><td><input type="checkbox" name="individual" id="individual" />Individual</td><td><input type="checkbox" name="cash" id="cash" />Cash Account</td>
</tr>
<tr>
<td colspan="2" rowspan="3"></td><td><input type="checkbox" name="tabloid" id="tabloid" />Tabloid Example</td>
<td><input type="checkbox" name="broadsheet" id="broadsheet" />Broadsheet Example</td></tr>
<tr><td><input type="checkbox" name="colmt" id="colmt" />Column Sizes Tabloid</td>
<td><input type="checkbox" name="colmb" id="colmb" />Column Sizes Broadsheet</td></tr>
<tr><td><input type="checkbox" name="maps" id="maps" />Maps / Distribution</td><td colspan="2" align="right">External Attachments <input id="upload_file" name="upload_file" type="file"/> </td></tr>
<tr><td colspan="2"><span class="que">Message :</span></td><td colspan="3">
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%">
<?php
echo "<br><br><br>" . $from_person . "<br>" . $from_mobile;
?>
</textarea>
</td></tr>
</table>
</form>
</body>
</html>
Hi, I have a working contact form with 3 of the fields requiring validation and they work well. I have added extra fields to the form (StatusClass, Project, CameFrom). These 3 fields return fine but I need to validated them. My problem is that the new fields don't show in the behaviours/validate panel even though they are within the form tag. Can anyone give me any help and advice as to how to accomplish this? Many thanks Code below.... Code: <script type="text/JavaScript">
<!--
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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[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
> Code: <form action="contact_us.asp" method="post" name="contact" target="_parent" class="contentText" id="contact" onsubmit="MM_validateForm('FullName','','R','Telephone','','RisNum','Email','','RisEmail');return document.MM_returnValue">
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<tr>
<td width="54%" class="subHeader">Full Name* </td>
<td width="46%" class="subHeader"><input name="FullName" type="text" id="FullName" /></td>
</tr>
<tr>
<td class="subHeader">Company Name </td>
<td class="subHeader"><input name="CompanyName" type="text" id="CompanyName" /></td>
</tr>
<tr>
<td class="subHeader">Address</td>
<td class="subHeader"><input name="Address1" type="text" id="Address1" /></td>
</tr>
<tr>
<td class="subHeader"> </td>
<td class="subHeader"><input name="Address2" type="text" id="Address2" /></td>
</tr>
<tr>
<td class="subHeader"> </td>
<td class="subHeader"><input name="Address3" type="text" id="Address3" /></td>
</tr>
<tr>
<td class="subHeader">Postcode</td>
<td class="subHeader"><input name="Postcode" type="text" id="Postcode" /></td>
</tr>
<tr>
<td class="subHeader">Telephone Number* </td>
<td class="subHeader"><input name="Telephone" type="text" id="Telephone" /></td>
</tr>
<tr>
<td class="subHeader">Mobile Number </td>
<td class="subHeader"><input name="Mobile" type="text" id="Mobile" /></td>
</tr>
<tr>
<td height="25" class="subHeader">Email Address* </td>
<td class="subHeader"><input name="Email" type="text" id="Email" /></td>
</tr>
<tr>
<td height="30" class="subHeader">Status*</td>
<td class="subHeader"><select name="StatusClass" id="StatusClass">
<option selected="selected">Please Choose</option>
<option>Architect</option>
<option>Interior Designer</option>
<option>Private Client</option>
<option>Student</option>
<option>Trade Enquiry</option>
</select> </td>
</tr>
<tr>
<td height="23" class="subHeader">Project*</td>
<td class="subHeader"><select name="Project" size="1" id="Project">
<option selected="selected">Please Choose</option>
<option>Planning Stages</option>
<option>New Build</option>
<option>Refurbishment</option>
<option>Barn Conversion</option>
<option>No project - information only</option>
</select> </td>
</tr>
<tr>
<td height="37" class="subHeader">How did you hear about us?*</td>
<td class="subHeader"><select name="CameFrom" size="1" id="CameFrom">
<option selected="selected">Please Choose</option>
<option>Web Search</option>
<option>Grand Designs</option>
<option>Living Etc</option>
<option>Home Building & Renovation</option>
<option>Architect</option>
<option>Friend/Family</option>
<option>Magazine/Editorial</option>
<option>Newspaper Article</option>
<option>Trade Show/Exhibition</option>
<option>Other</option>
</select></td>
</tr>
<tr>
<td height="24" class="subHeader">Brochure Request </td>
<td class="subHeader"><input name="Brochure" type="checkbox" id="Brochure" value="checkbox" /></td>
</tr>
<tr>
<td class="subHeader">Message</td>
<td class="subHeader"><span class="style4">
<textarea name="Message" id="Message"></textarea>
</span></td>
</tr>
<tr>
<td class="subHeader"> </td>
<td class="subHeader"><input name="Submit" type="submit" value="Submit" /></td>
</tr>
<tr>
<td colspan="2" class="subHeader"><em>* Required fields</em></td>
</tr>
</table>
</form>
I've set up a mock registration form page so I can learn a bit about javascript's form validation. (newbie) I want to try to attempt to style the border of a form field green when the user enters the correct info into the form text field and red on all other fields if the user doesnt enter any info into them. When i test it, enter the right info into the username field, leave the others blank, and hit the submit button it styles the username field green ok but it doesnt make the next fields (password and so on) red. Could someone please explain what I am doing wrong? here is my code so far... Note: just for testing purposes I've put return false on everything so it displays a message when everythings ok. Code: ....
<script type="text/javascript">
window.onload = function() {
document.forms[0].username.focus();
}
function validate(form)
{
var form = document.getElementById("reg");
var e = document.getElementById("error");
e.style.background = "red";
for(var i = 0; i < form.elements.length; i++)
{
var el = form.elements[i];
if(el.type == "text" || el.type == "password")
{
if(el.value == "")
{
e.innerHTML = "Please fill in all fields!";
el.style.border = "1px solid red";
el.focus();
return false;
} else {
el.style.border = "1px solid green";
return false;
}
}
}
var un = form.username;
un.value = un.value.replace(/^\s+|\s+$/g,"");
if((un.value.length < 3)|| (/[^a-z0-9\_]/gi.test(un.value)))
{
e.innerHTML = "Only letters,numbers and the underscore are allowed (no spaces) - 3-16 characters";
un.focus();
return false;
}
var pw = form.password;
pw.value = pw.value.replace(/^\s+|\s+$/g,"");
if((pw.value.length < 3) || (/[^a-z0-9]/gi.test(pw.value)))
{
e.innerHTML = "Only letters and numbers are allowed (no spaces) - 3-16 characters";
pw.focus();
return false;
}
e.innerHTML = "You filled in all the fields, well done!";
e.style.background = "green";
return false;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>My Cool Website</h1>
</div>
<div id="content">
<div class="padding">
<h2>Registration</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<form id="reg" action="#" method="post" onsubmit="return validate(this)">
<div id="error"></div>
<div><label for="username">Username</label></div>
<div><input type="text" name="username" id="username" size="30" maxlength="16" /></div>
<div><label for="password">Password</label></div>
<div><input type="password" name="password" id="password" size="30" maxlength="16" /></div>
<div><label for="c_password">Confirm Password</label></div>
<div><input type="password" name="c_password" id="c_password" size="30" maxlength="16" /></div>
<div><label for="email">Email address</label></div>
<div><input type="text" name="email" id="email" size="30" maxlength="200" /></div>
<div><label for="c_email">Confirm Email address</label></div>
<div><input type="text" name="c_email" id="c_email" size="30" maxlength="200" /></div>
<div><label for="firstname">First name</label></div>
<div><input type="text" name="firstname" id="firstname" size="30" maxlength="100" /></div>
<div><label for="surname">Surname</label></div>
<div><input type="text" name="surname" id="surname" size="30" maxlength="100" /></div>
<div><label for="gender">Gender</label></div>
<div>
<div><input type="radio" name="gender" id="gender" value="m" checked="checked" />Male</div>
<div><input type="radio" name="gender" value="f" />Female</div>
</div>
<div><input type="submit" value="Register" name="submit" /></div>
</form>
</div>
</div>
<div id="footer">
<p>Copyright © 2009 My Cool Website</p>
</div>
</div>
</body>
</html>
I have been hard at work coding a fancy JQuery form validation script. Problem is, when I run validation on my form, it seems to work, but no email is sent. But when I disable validation, the email sends just fine. I am fairly new to JavaScript, and need some help pinpointing where my error is. Here is the code. Code: // BEGIN JAVASCRIPT
$(function(){
//original field values
var field_values = {
//id : value
'name' : 'your name',
'email' : 'your email',
'yourmessage' : 'I would like to inquire about'
};
//inputfocus
$('input#name').inputfocus({ value: field_values['name'] });
$('input#email').inputfocus({ value: field_values['email'] });
$('textarea#yourmessage').inputfocus({ value: field_values['yourmessage'] });
//form validation
$('form').submit(function validateForm(){ return false }); // removing this return false seems to mess up validation
$('#submit').click(function(){
//remove classes
$('#sendamessage input').removeClass('error').removeClass('valid');
//ckeck if inputs aren't empty
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var fields1 = $('#sendamessage input[type=text],#sendamessage textarea');
var error = 0;
fields1.each(function(){
var value = $(this).val();
if( value.length<2 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
$(this).addClass('error'); // css class
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid'); // css class
}
});
if(!error) {
// this is where I get confused. How do I make this send the form?
alert('Data sent');
});
}
});
});
// END JAVASCRIPT
<form method="post" action="" onsubmit="return validateForm()" >
<input type="hidden" name="ccf_customhtml" value="1" />
<input type="hidden" name="success_message" value="Thank you for filling out our form!" />
<input type="hidden" name="destination_email" value="dauidus@gmail.com" />
<input type="hidden" name="required_fields" value="" />
<label for="name">Name</label>
<input type="text" name="name" id="name" value="your name" />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="your email" />
<label for="yourmessage">Your Message</label>
<textarea name="yourmessage" id="yourmessage" value="I would like to inquire about" style="margin-bottom:20px;" />I would like to inquire about</textarea>
<input class="send submit" id="submit" type="submit" value="" style="position: relative; bottom: -70px; left: 25px; " />
</form>
I am using a WordPress plugin to automatically send the contents of the form to email. It works without the javascript enabled. But when I turn on JS the form gets validated, but no email is sent. Please let me know if I should include anything else here... I've been looking at this code so much that I'm having a hard time doing it with fresh eyes. The problem page is on http://new.dauidusdesign.com/contact/. FYI, I am also looking to make this work with the 'request a quote' link on the same page. Cheers! -Dave Hi All, I have created my second Form to File Web Form thanks to some help from other members. Looks great. I am still new to HTML and Javascript, but basically I took my First Web Form coding (with the Java Script) and manipulated it so that it suited my needs for my 2nd Form (both are very close to being the same). For some reason, I can't get my Java Script validation to take effect. I was wondering if some one could try to pin point why it isn't functioning properly? Again it could be the most obvious thing, but please bear with me as I learn. Just for a little more clarity, I am going to list the things that I have changed to possibly make it easier to pin point: Added Fields: Department, SteetAddress, CityState Deleted: State/Research Accounts, Vendor Checkbox Modified: "Type" which is a radio button that I have changed the choices of. I beleive that's it...I will post my Java Script here and attach my Index File. Thank you in advance!! Code: /********************************************************************************
*
* FORM VALIDATION
*
********************************************************************************/
// get the value of a radio button group:
function getRBValue(grp)
{
if ( grp.length == null ) return grp.checked ? grp.value : null;
for ( var g = 0; g < grp.length; ++g )
{
if ( grp[g].checked ) return grp[g].value;
}
return null;
}
// trim a string
function trim(fld)
{
var val = fld.value.replace(/^\s+/,"").replace(/\s+%/,"").toUpperCase();
fld.value = val;
return val;
}
var echk = /^([a-z][\w\-\'\.]*)+\@([a-z][\w\-\'\.]+\.)+[a-z]{2,6}$/i
function emailCheck( fld )
{
var email = trim( fld );
fld.value = email;
return echk.test(email);
}
var digonly = /[^\d]/g
function formatPhone( fld )
{
var ph = fld.value.replace( digonly, "" );
if ( ph.length != 10 ) return;
fld.value = "(" + ph.substring(0,3) + ") " + ph.substring(3,6) + "-" + ph.substring(6);
}
var phchk = /^\(\d\d\d\) \d\d\d\-\d\d\d\d$/
function phoneCheck( fld )
{
return phchk.test(fld.value);
}
function validateForm( frm )
{
var oops = "";
if ( trim( frm.elements["Username."] ).length < 5 )
oops += "You must enter your first and last name\n";
if ( ! emailCheck( frm.elements["Email."] ) )
oops += "That does not appear to be a valid email address\n";
if ( trim( frm.elements["Department."] ).length < 3)
oops += "You must enter your department name\n";
if ( ! phoneCheck( frm.elements["Phone."] ) )
oops += "That is not a valid 10-digit phone number\n";
if ( trim( frm.elements["ShipToBuildingRoom."] ).length < 5 )
oops += "You must enter your building and room information\n";
if ( trim( frm.elements["StreetAddress."] ).length < 5 )
oops += "You must enter your street address information\n";
if ( trim( frm.elements["CityZip."] ).length < 5 )
oops += "You must enter your city and zip code information\n";
apptype = getRBValue( frm.elements["Type."] );
if ( apptype == null )
oops += "You must check one class\n";
var app = getRBValue( frm.RequireApprovalYesNo );
if ( app == null )
oops += "You must specify whether or not approval is required.\n";
if ( app == "Yes" )
{
if ( trim( frm.Approver ).length < 5 )
oops += "You must enter the name of the approver\n";
if ( ! emailCheck( frm.ApprovalEmail ) )
oops += "The approval email is not a valid email address\n";
}
}
function showapp(yesno)
{
document.getElementById("APP1").style.display =
document.getElementById("APP2").style.display =
document.getElementById("APP3").style.display =
yesno ? "" : "none";
}
</SCRIPT>
I've been using a script for verifying forms across several pages, and I've run into a page where it won't work the way it is. It's a form that loops through and creates a set of fields over and over, depending on the number of attendees. I'm assuming this disrupts the form verification because the fields get generated with the same id. I think I need to find another way to make sure the user enters valid and complete information. Here's what I've been using: Code: function myForm(){
// Make quick references to our fields
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
var birth_month = document.getElementById('birth_month');
var birthday = document.getElementById('birthday');
var birthyear = document.getElementById('birthyear');
// Check each input in the order that it appears in the form!
if(isAlphabet(fname, "Please enter only letters for your first name")){
if(isAlphabet(lname, "Please enter only letters for your last name")){
if(madeSelection(birth_month, "Pleace choose a birth month")){
if(madeSelection(birthday, "Please choose a birth day")){
if(madeSelection(birthyear, "Please choose a birth year")){
return true;
}
}
}
}
}
return false;
}
function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z ]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
function madeSelection(elem, helperMsg){
if(elem.value == ''){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}
</script>
<!-- the snippet that creates the form fields is he -->
$count = $line;
$i = 1;
while ($i <= $count) {
$i++; /* the printed value would be
$i before the increment
(post-increment) */
$x = $i-1;
?>
<form name="register1" class="registration_form" method="post" action="register2.php" target="_self" onsubmit="return myForm()">
First Name<br><input type="text" name="kfname[]" id="fname" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" /><br>
Kid's Last Name<br><input type="text" name="klname[]" id="lname" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" /><br>
Birthdate<br>
<select style="width:75px;" id="birth_month" name="bdate2[]" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" >
<option value="">month</option>
<option value="01">Jan</option>
<option value="02">Feb</option>
<!-- etcetera -->
</select>
<select style="width:57px;" id="birthday" name="bdate[]" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" >
<option value="">day</option>
<option value="01">01</option>
<option value="02">02</option>
<!-- etcetera -->
</select>
<select style="width:60px;" id="birthyear" name="bdate3[]" onfocus="this.className='reg_live';" onblur="this.className='reg_off';" >
<option value="">year</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<!-- etcetera -->
</select>
</form>
Hey friends, I am working on making a simple form validation that will also validate that the email entered is in proper form. This is my HTML code: Code:
<form method="post" form action="sendmail.asp">
<p><label for="emailAddr">Email Address:
<input id="emailAddr" type="text" size="30" class="reqd email" />
</label></p>
<p><label for="color">Colors:
<select id="color" class="reqd">
<option value="">Choose a player</option>
<option value="rodgers">Aaron Rodgers</option>
<option value="woodson">Charles Woodson</option>
<option value="driver">Donald Driver</option>
<option value="hawk">A.J. Hawk</option>
<option value="bigby">Atari Bigby</option>
<option value="barnett">Nick Barnett</option>
</select>
</label></p>
<p>Options:
<label for="home"><input type="checkbox" id="home" value="Yes" />
Home Jersey
</label>
<label for="away"><input type="checkbox" id="away" value="Yes" />
Away Jersey</label></p>
<p>
<label for="jerseySet">Size:
<input type="radio" id="large" name="jerseySet" value="sizeLarge" class="radio" />
Large
<input type="radio" id="xlarge" name="jerseySet" value="sizeXlarge" class="radio" />
X-Large
</label></p>
<p>
<label for="zip">Enter your Zip code:<br />
Zip: <input id="zip" type="text" size="5" maxlength="5" class="isZip dealerList" />
<select id="dealerList" size="4" class="zip">
<option value="Kenosha--Wisconsin">Kenosha--Wisconsin</option>
<option value="Racine--Wisconsin">Racine--Wisconsin</option>
<option value="Milwaukee--Wisconsin">Milwaukee--Wisconsin</option>
<option value="Waukesha--Wisconsin">Waukesha--Wisconsin</option>
<option value="Waterford--Wisconsin">Waterford--Wisconsin</option>
</select>
</label></p>
<p><input type="submit" value="Submit" /> <input type="reset" /></p>
</form>
This is my JavaScript: Code: window.onload = initForms;
function initForms() {
for (var i=0; i< document.forms.length; i++) {
document.forms[i].onsubmit = function() {return validForm();}
}
document.getElementById("home").onclick = jerseySet;
}
function validForm() {
var allGood = true;
var allTags = document.getElementsByTagName("*");
for (var i=0; i<allTags.length; i++) {
if (!validTag(allTags[i])) {
allGood = false;
}
}
return allGood;
function validTag(thisTag) {
var outClass = "";
var allClasses = thisTag.className.split(" ");
for (var j=0; j<allClasses.length; j++) {
outClass += validBasedOnClass(allClasses[j]) + " ";
}
thisTag.className = outClass;
if (outClass.indexOf("invalid") > -1) {
invalidLabel(thisTag.parentNode);
thisTag.focus();
if (thisTag.nodeName == "INPUT") {
thisTag.select();
}
return false;
}
return true;
function validBasedOnClass(thisClass) {
var classBack = "";
switch(thisClass) {
case "":
case "invalid":
break;
case "reqd":
if (allGood && thisTag.value == "") {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "radio":
if (allGood && !radioPicked(thisTag.name)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "isNum":
if (allGood && !isNum(thisTag.value)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "isZip":
if (allGood && !isZip(thisTag.value)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
case "email":
if (allGood && !validEmail(thisTag.value)) {
classBack = "invalid ";
}
classBack += thisClass;
break;
default:
if (allGood && !crossCheck(thisTag,thisClass)) {
classBack = "invalid ";
}
classBack += thisClass;
}
return classBack;
}
function crossCheck(inTag,otherFieldID) {
if (!document.getElementById(otherFieldID)) {
return false;
}
return (inTag.value != "" || document.getElementById(otherFieldID).value != "");
}
function radioPicked(radioName) {
var radioSet = "";
for (var k=0; k<document.forms.length; k++) {
if (!radioSet) {
radioSet = document.forms[k][radioName];
}
}
if (!radioSet) {
return false;
}
for (k=0; k<radioSet.length; k++) {
if (radioSet[k].checked) {
return true;
}
}
return false;
}
function isNum(passedVal) {
if (passedVal == "") {
return false;
}
for (var k=0; k<passedVal.length; k++) {
if (passedVal.charAt(k) < "0") {
return false;
}
if (passedVal.charAt(k) > "9") {
return false;
}
}
return true;
}
function isZip(inZip) {
if (inZip == "") {
return true;
}
return (isNum(inZip));
}
function validEmail(email) {
var invalidChars = " /:,;";
if (email == "") {
return false;
}
for (var k=0; k<invalidChars.length; k++) {
var badChar = invalidChars.charAt(k);
if (email.indexOf(badChar) > -1) {
return false;
}
}
var atPos = email.indexOf("@",1);
if (atPos == -1) {
return false;
}
if (email.indexOf("@",atPos+1) != -1) {
return false;
}
var periodPos = email.indexOf(".",atPos);
if (periodPos == -1) {
return false;
}
if (periodPos+3 > email.length) {
return false;
}
return true;
}
function invalidLabel(parentTag) {
if (parentTag.nodeName == "LABEL") {
parentTag.className += " invalid";
}
}
}
}
function jerseySet() {
if (this.checked) {
document.getElementById("sizeLarge").checked = true;
}
}
It will not submit and process. What am I doing wrong? Thanks so much in advance. For my class activity(home work) I need validate a form which has several fields. I have created the form (html) and wrote some codes for validation. I want all my form fields display help text when they get focused and when the user enter invalid data display error text(not alert). All my help text are working. but error text are not. I wrote on focus and on blur events and functions for each field. But every time I preview it on IE I am getting "object expected error" I carefully checked all the element Id and those are okay. Please help me. function myFocusHandler(e) { var newClassName; var eventTarget; if (e.target) { eventTarget = e.target; } else if (e.srcElement) { eventTarget = e.srcElement; } else { eventTarget = window.event.srcElement; } if (e.type == "focus" ) { newClassName = "helpshow"; eventTarget.className = 'inputfocus'; } else if (e.type == "blur" ) { newClassName = "helphide"; eventTarget.className = 'inputblur'; } var relatedSpansId = eventTarget.id + "help"; document.getElementById(relatedSpansId).className = newClassName; } function errorshow(elementId) { var relatedSpansId = elementId + "error"; document.getElementById(relatedSpansId).className = "errorshow"; function hideError(elementId) { var relatedSpansId= elementId + "error"; document.getElementById(relatedSpansId).className = "errorhide"; } function validateAllFields() { var isemailOK = false; var isformValid = true; var email=document.getElementById("email"); IsemailOK=IsemailValid(); if (IsemailOK == false) { formIsValid = false; errorshow("email"); } else { errorhide("email"); } return formIsValid; } function isemailValid() { var emailIsValid=false; var emailElement; var emailValue; emailElement = document.getElementById("email"); emailValue = emailElement.value; if (emaiValue== "/^[0-9A-Za-z\.\-_]+@([0-9A-Za-z\-_]+\.)+[A-Za-z]{2,}$/") { emailIsValid=true; }else{ emailIsValid=false; } return emailIsValid; function validateemail(event) { myFocusHnadler(event); var isemailOK = false; isemailOK=isemailValid(); if(emailOK == false) { errorshow("email"); }else{ erroehide("email"); } } Hi, I am doing a form validation where the form fields are dynamically created.. I need to show errormessages(Instead of alert messages) for the fields which fails validation... For time being I have created a dummy hardcoded form to test validation... The classnames could be named as "mandatory|date" mandatory|email etc... or it can be null or it can be only named as email,date,numbers etc.... So Here I need to either 1) alert the label values and show corresponding error messages(eg.. Name should not be empty, email should not be empty etc... 2) Display error messages next to the field which fails validation... But also please keep it in mind that the div id for each fields would be same... So is there any way to get this done even thru DOM scripting..? For reference please find the attachment... Please help... Please help me ....In the following code i have two tables each with a form and a submit button ...and is not working properly... each form should be validated separately wi the same javascript function <code> <html> <script type="text/javascript"> function validate_form1(frm){ var valid=true,z0=1; for (;frm['dropdown'+z0];z0++){ if (frm['dropdown'+z0].value.replace(/\s/g,'')==''){ document.getElementById("sp"+z0).style.color = "red"; valid=false; } else { document.getElementById("sp"+z0).style.color = "black"; } } if (!valid){ alert ( "Select at least one option." ); } return valid; } </script> <table> <form name="contact_form2" action="http://localhost//final1/facultyfeedbacksaving.php" method="post" onSubmit="return validate_form1 (this);"> <tr> <td><span id="sp1">Question 1:<select name="dropdown1"> <option value="">SELECT...</option> <option value="g">GOOD</option> <option value="s">Satidfactory</option> <option value="u">Unsatisfactory</option> </select> </td></tr> <tr><td><span id="sp2"> Question 2:<select name="dropdown2"> <option value="">SELECT...</option> <option value="g">GOOD</option> <option value="s">Satidfactory</option> <option value="u">Unsatisfactory</option> </select> </td></tr> <tr> <td><td align="center" colspan="2"><input type="submit" name="submit" value="Submit"></td></td></tr> </form> </table> </td> <td rowspan=1 width="300" height="30" valign="top" bgcolor="yellow" > <?php echo $f2 ;$_SESSION['faculty2name'] = $f2;?> <table> <form name="contact_form3" action="http://localhost//final1/facultyfeedbacksaving.php" method="post" onSubmit="return validate_form1 (this);"> <tr> <td><span id="sp3">Question 1:<select name="dropdown3"> <option value="">SELECT...</option> <option value="g">GOOD</option> <option value="s">Satidfactory</option> <option value="u">Unsatisfactory</option> </select> </td></tr> <tr><td><span id="sp4"> Question 2:<select name="dropdown4"> <option value="">SELECT...</option> <option value="g">GOOD</option> <option value="b">BAD</option> <option value="a">Average</option> </select> </td></tr> <tr> <td><td align="center" colspan="2"><input type="submit" name="submit" value="Submit"></td></td></tr> </form> </table> </html> </code> Hello everyone, I found a form on this page http://sbpoley.home.xs4all.nl/webmatters/formval.html and I want to make something like that.. could someone please tell me the javascript code this. it doesnt have to be the entire code. just one texfield so I can see how it's done. I want to make a form where it validates while the user is entering the information... just like that example. thanks! HI all, I have a contact for that requires validating for a number of things. It validates Required for all parts of the form however fine. My question is how can I ensure the client fills out the form fully. For instance, here in the UK we use 11 digits for phone numbers, but the form will validate if the clint enters just 1, so how can I ensure the customer actually enters all 11. Here is the javascript I am using function isFilled(str){ return (str != ""); } function isEmail(str) { return (str.indexOf(".") > 2) && (str.indexOf("@") > 0); } function isDigital(str) { return(parseFloat(str,10)==(str*1)); } function isCurrency(val) { var re = /^(\$?\d+\$?|\$?\d+\.\d+\$?)$/; return (re.test(val)); } function ValidForm(form) { var field, i; var req = new Array(10); var email = new Array(1); var digits = new Array(1); var currs = new Array(0); req[0] = "rw_First_Name"; req[1] = "rw_Last_Name"; req[2] = "re_Email"; req[3] = "rd_Mobile_Number"; req[4] = "r_Hair_Service"; req[5] = "r_Stylist"; req[6] = "r_Preferred_Day"; req[7] = "r_Preferred_Date"; req[8] = "r_Month"; req[9] = "r_Preferred_Time"; email[0] = "re_Email"; digits[0] = "rd_Mobile_Number"; for (i=0;i<10;i++) { eval("field = form." + req[i]); if (!isFilled(field.value)) { alert("Field '" + field.title + "' is required to be filled in before successful submission."); field.focus(); return false; break; }} for (i=0;i<1;i++) { eval("field = form." + email[i]); if (!isEmail(field.value)) { alert("Field '" + field.title + "' is required to be filled in with valid email addresses before successful submission."); field.focus(); return false; break; }} for (i=0;i<1;i++) { eval("field = form." + digits[i]); if (!isDigital(field.value)) { alert("Field " + field.title + " is required to be filled in only with digits (0-9) and decimal point before successful submission."); field.focus(); return false; break; }} for (i=0;i<0;i++) { eval("field = form." + currs[i]); if (!isCurrency(field.value)) { alert("Field " + field.title + " is required to be filled in only with digits (0-9) a decimal point, or a dollar sign before successful submission."); field.focus(); return false; break; }} return true; } Hi am making a form and i used java script for validations .Every thing working fine but i want some thing different from the normal. When some one do not enter the required fields in the form i want a red focus around the form and i don need an alert.Please some one suggest me Am attaching Markup, css and the java script. regards Live Example: Live Example Mark Up : Quote: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>Date Of Birth Form</title> <style type="text/css" media="all">@import "form.css";</style> <script type="text/javascript" src="validate_form.js"></script> </head> <body> <div id="page-container"> <form name="applyform" action="#" onsubmit="return validate_form();" method="post"> <label><strong>Date of Birth: </strong>We will use this information to match patient to existing Walgreens records.</label><br /><br /> <label class="labels"><strong>Month: </strong></label><label class="labels"><strong>Day: </strong></label><label class="labels"><strong>Year: </strong></label><br /><br /> <select name="month"> <option value="null"></option> <option value="january">January</option> <option value="february">February</option> </select> <select name="day"> <option value="null"></option> <option value="1">1</option> <option value="2">2</option> </select> <select name="year"> <option value="null"></option> <option value="2011">2011</option> <option value="2010">2010</option> <option value="2009">2009</option> </select><br /><br /> <label><strong>Phone Number: </strong> Example (5551234444)</label><br /><br /> <input type="text" name="phone" class="phonetext"/> <br /><br /> <input type="submit" name="confirm" value="CONFIRM" class="button"/> </form> </body> </html> CSS : Quote: html, body { margin: 0; padding: 0; } #page-container{ width:960px; margin:auto; padding-left:30px; padding-top:40px; } form{ font-family: Arial, Helvetica, Sans-serif; font-size:13px; color:#000; } .labels{ margin-right:60px; } form select{ margin-right:25px; } .phonetext{ width:230px; } .button{ background: url(images/button.png); width:65px; height:20px; font-family:arial, helvetica, sans-serif; font-size:10px; color:#fff; cursorointer; font-weight:bold; border:none; padding-bottom:3px; } Java Script : Quote: function validate_form ( ) { valid = true; if (document.applyform.month.value == "null" ) { alert ( "Select a Month" ); document.applyform.month.focus(); document.applyform.month.style.background = "#dbf4fa"; valid = false; } else if (document.applyform.day.value == "null" ) { alert ( "Select a Day" ); document.applyform.day.focus(); document.applyform.day.style.background = "#dbf4fa"; valid = false; } else if (document.applyform.year.value == "null" ) { alert ( "Select a Year" ); document.applyform.year.focus(); document.applyform.year.style.background = "#dbf4fa"; valid = false; } else if (document.applyform.phone.value == "" ) { alert ( "enter a phone number" ); document.applyform.phone.focus(); document.applyform.phone.style.background = "#dbf4fa"; valid = false; } return valid; } I'm using code at the bottom of this post for form validation. It works well to test that every field is not empty. BUT, I'm trying to prohibit email addresses in the description field. When I use this... Code: else if ( document.add_form.description.value =~ "@" ) ...the script sends up an alert, but then the content in the description field is completely erased and replaced with a "-1" which forces people to lose what they entered. How can I simply put up an alert that leaves the content in the description field? Here's the full code: Code: <script type="text/javascript">
<!--
function validate_form ( )
{
valid = true;
if ( document.add_form.title.value == "" )
{
alert ( "Please fill in the 'Title' field." );
valid = false;
}
else if ( document.add_form.description.value == "" )
{
alert ( "Please fill in the 'Description' field." );
valid = false;
}
else if ( document.add_form.description.value =~ "@" )
{
alert ( "Please fill in the 'Description' field." );
valid = false;
}
else if ( document.add_form.address1.value == "" )
{
alert ( "Please fill in the 'Address' field." );
valid = false;
}
else if ( document.add_form.city.value == "" )
{
alert ( "Please fill in the 'City' field." );
valid = false;
}
else if ( document.add_form.state.selectedIndex == 0 )
{
alert ( "Please select a State." );
valid = false;
}
else if ( document.add_form.zip.value == "" )
{
alert ( "Please fill in the 'Zip Code' field." );
valid = false;
}
return valid;
}
//-->
</script>
Thanks! Hello guys, I am working on my form page. Everything is working fine except one problem that I have...On my form, if I put nothing on the textboxes or choose no radio buttons, it suppose to say warning messages right next to it when I push the submit button. Also those warning messages supposed to be show up all at the same time. However, one of my warning messages for radio button don't show up. It only shows up when the other fieldset radio button is selected. And here is my code for html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="" />
<meta name="description" content="forms" />
<meta name="keywords" content="Client Side Programming, JavaScript, CSS" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<link rel="stylesheet" href="javascript.css"/>
<script type="text/javascript" src="CSP.js"></script>
<title>Forms::</title>
</head>
<body>
<div id="container">
<!-- Begin web page -->
<div id="header"><!-- Header and Navigation -->
<!-- Page Heading --><!-- Navigation -->
<script type="text/javascript">
displayHeader();
</script> <br/><br/>
</div>
<div id="content">
<!-- Main Content -->
<h1>Photo Gallery: Ordering Form</h1><div id="orderForm">
<script type="text/javascript">
displayPhoto();
</script>
<div id="photoName"><p>      
        City              
                      
                   Night</p>
</div>
<form id="frmCourse" method="get" action="ErrorMessage_FormProcessor.htm"
enctype="application/x-www-form-urlencoded"
onsubmit= "return validate();"> // this is calling the function in my js file
<fieldset>
<legend>Customer Information</legend>
<!-- Name Input --><div class=nameWrapper>
<p><label for="txtName" id="lblName">Name: </label>
<input type="text" name="txtName" id="txtName" accesskey="N" tabindex="0" value="" />
<label class="errorMessage" id="errMessageName">* Required Field</label></p>
<!-- Email -->
<p><label for="txtEmail" id="lblEmail">Email: </label>
<input type="text" name="txtEmail" id="txtEmail" accesskey="E" tabindex="1" value="" />
<label class="errorMessage" id="errMessageEmail">* Required Field</label></p></div>
</fieldset><br/>
<fieldset>
<legend>Select Image</legend>
<!-- Order Option -->
<p><label for="rdImageOne" id="rdImageOne">City</label>
<input type="radio" name="rdImageOne" id="rdImageOne" accesskey="C" tabindex="2" value="" />
<label for="rdImageTwo" id="rdImageTwo">Night</label>
<input type="radio" name="rdImageOne" id="rdImageTwo" accesskey="N" tabindex="3" value="" />
<label class="errorMessage" id="errMessageImageTwo">* Select an Image</label></p>
</fieldset><br/>
<fieldset>
<legend>Order Information</legend>
<!-- Size Option -->
<p><label for="rdoptionOne" id="rdoptionOne">4-Wallets ($10)</label>
<input type="radio" name="rdoption" id="rdoptionOne" accesskey="O" tabindex="4" value="" />
<label for="rdoptionTwo" id="rdoptionTwo">8X10 ($20)</label>
<input type="radio" name="rdoption" id="rdoptionTwo" accesskey="T" tabindex="5" value="" />
<label class="errorMessage" id="errMessageOptionTwo">* Select a size</label></p>
<p><label for="rdoptionThree" id="rdoptionThree">2-4X6 ($10)</label>
<input type="radio" name="rdoption" id="rdoptionThree" accesskey="H" tabindex="6" value="" />
<label for="rdoptionFour" id="rdoptionFour">11X14 ($30)</label>
<input type="radio" name="rdoption" id="rdoptionFour" accesskey="F" tabindex="7" value="" /></p>
<p><label for="rdoptionOne" id="rdoptionOne">5X7 ($10)</label>
<input type="radio" name="rdoption" id="rdoptionFive" accesskey="I" tabindex="8" value="" /></p>
<p><label for="txtQuantity" id="lblQuantity">Quantity: </label>
<input type="text" name="txtQuantity" id="txtQuantity" accesskey="X" tabindex="9" value="" />
<label class="errorMessage" id="errMessageQuantity">* Must Be 1-25</label></p>
<!-- Submit Buttons -->
<p><div class="submitWrapper"><input type="submit" name="btnSubmit" id="btnSubmit" value="Prepare Order" align = "center" accesskey="s" tabindex="10" /></p>
</div>
</fieldset><br/>
</form></div>
<div id="footer">
<!-- Footer -->
<!-- Begin Footer Div-->
<script type="text/javascript">displayFooter();</script>
<!-- End Footer Div -->
</div>
<!--End web page -->
</div>
</body>
</html>
And here is a code for my js file. I feel like there is something wrong with which one it validates first. I tried to change the order, but I could not find the way to correct this. Code: function validate(){
var blnError = false;
//validate if email textbox is empty
if (document.forms[0].txtEmail.value <= 0){
document.getElementById('errMessageEmail').style.display="inline";
document.forms[0].txtEmail.focus();
blnError = true;
}
else{
document.getElementById('errMessageEmail').style.display="none";
}
//validate if name textbox is empty
if (document.forms[0].txtName.value == ""){
document.getElementById('errMessageName').style.display="inline";
document.forms[0].txtName.focus();
blnError = true;
}
else{
document.getElementById('errMessageName').style.display="none";
}
//validate if email quantitybox is empty
if (document.forms[0].txtQuantity.value == ""
||document.forms[0].txtQuantity.value <= 0
||document.forms[0].txtQuantity.value > 25
||isNaN(document.forms[0].txtQuantity.value)){
document.getElementById('errMessageQuantity').style.display="inline";
document.forms[0].txtQuantity.focus();
blnError = true;
}
else{
document.getElementById('errMessageQuantity').style.display="none";
}
//validate if picture option radio button is choosen
var sizeSelection = false;
for(var i=0; i<5; ++i){
if(document.forms[0].rdoption[i].checked ==true){
sizeSelection = true;
}
}
if(sizeSelection==false){
document.getElementById('errMessageOptionTwo').style.display="inline";
return false;
}
else{
document.getElementById('errMessageOptionTwo').style.display="none";
sizeSelection == true;
}
//validate if size option radio button is choosen
var pictureSelection = false;
for(var i=0; i<2; ++i){
if(document.forms[0].rdImageOne[i].checked ==true){
pictureSelection = true;
}
}
if(pictureSelection==false){
document.getElementById('errMessageImageTwo').style.display="inline";
return false;
}
else{
document.getElementById('errMessageImageTwo').style.display="none";
pictureSelection == true;
}
if (blnError == true){
return false;
}
else {
return true;
}
}
can anyone help me on this please? Hi, I am trying to make a form check two fields (using regular expressions) and then submit. So far I have created my expressions but i cant get the form to validate correctly! I seem to get the error associated with the loyalty card rather than the postcode check. Any help would be appreciated My code is: <script type="text/javascript"> function validate(postalCode) { var re = new RegExp(/^([a-zA-Z]{2}[0-9]{1,2})|([0-9]{2}[a-zA-Z]{1,2})$/); var str = postalCode.value; if (re.test(str)) return true; else { alert("That is not a valid postcode. Please verify your input."); return false; } } function validate(cardNumber) { var re = new RegExp(/^([a-zA-Z]{1}[a-zA-Z0-9]{4})([a-zA-Z0-9]{5})([a-zA-Z0-9]{3})([0-9]{1}[!&@?]{1})$/); var str = cardNumber.value; if (re.test(str)) return true; else { alert("That is not a valid card number. Please verify your input."); return false; } } </script> <html> <form id="order" action= "" method="post" > <table cellpadding="5"> <tr> <td>Postal Code</td> <td><input type="text" name="postalCode" maxlength= "30" /></td> </tr> <tr> <td>Loyalty card</td> <td><input type="text" name="cardNumber" maxlength= "30" /></td> </tr> <input id = "submit" type="submit" value="Submit" onclick="validate(postalCode); validate(cardNumber)" /> </td> </form> </html> Hi, I have a form where I want to check that at least one email address has been entered on one line. The html form is below and users are given the option to add additional lines to the form using the addRowToTable function also below. How do I do this? I've tried several ways but because lines are added to the form, it doesn't work if you check over all 10 lines, when you're only showing 5. Form: <form action="<?=$_SERVER['PHP_SELF']?>" method="post" onsubmit="check_form();"name="form"> <input type="hidden" name="migrate" value="1" /> <table id="migration_emails" > <tr><td><input type="text" name="email_account_1" id="email_account_1" size="40"><input type="button" onclick="addRowToTable();" name="add" value="Add text box" /></td></tr> <tr><td><input type="text" name="email_account_2" id="email_account_2" size="40"></td></tr> <tr><td><input type="text" name="email_account_3" id="email_account_3" size="40"></td></tr> <tr><td><input type="text" name="email_account_4" id="email_account_4" size="40"></td></tr> <tr><td><input type="text" name="email_account_5" id="email_account_5" size="40"></td></tr> </table> <p><input type="submit" value="Migrate" /></p> </form> Add row to table function: function addRowToTable() { var tbl = document.getElementById('migration_emails'); var lastRow = tbl.rows.length; var iteration = lastRow + 1; if(iteration <= 10) { var row = tbl.insertRow(lastRow); var cellLeft = row.insertCell(0); var el = document.createElement('input'); el.type = 'text'; el.name = 'email_account_' + iteration; el.id = 'email_account_' + iteration; el.size = 40; cellLeft.appendChild(el); } else { document.form.add.disabled=true; alert('Sorry, a maximum of 10 accounts can be added at one time.'); } } |
|||||||