|
Form Validation with JavaScript
Topics
http://edison.seattlecentral.edu/~dw.../testform2.htm http://edison.seattlecentral.edu/~dw...ude/util-dw.js Could someone check js and tell me how I can get the form to validate it hangs up on password. just wondering why my form validation isn't working?! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Add Member</title>
<link href="css/popup.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function validateForm()
{
var member=document.forms["members"]["member"].value
if (member==null || member=="")
{
alert("Please enter a member name!");
return false;
}
}
</script>
</head>
<body style="margin:0px; background:none;">
<div class="popupheader"> Locum 8</div>
<form action="add_member_script.php" name="members" method="post" onsubmit="return validateForm();">
<fieldset>
<legend>Add Member</legend>
<table align="center" width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="124" align="right">Member Name: </td>
<td width="236"><input type="text" name="first_name" class="smallInput small" /></td>
</tr>
<tr>
<td width="124" align="right">Member Surname: </td>
<td width="236"><input type="text" name="second_name" class="smallInput small" /></td>
</tr>
<tr>
<td colspan="2" height="10"></td>
</tr>
<tr>
<td> </td>
<td><a href="javascript:document.members.submit();" class="button"><span>Add Member</span></a></td>
</tr>
<tr>
<td colspan="2" height="10"></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
I have problem with my javascript form validation... Validation works only on last question and I can't understand why it doesn't work on other questions.. Html code : 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>
<script type="text/javascript" src="script.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Questionaire</title>
<link href="oneColLiqCtrHdr19.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #FFF;
background-image: url(images/aa.jpg);
}
-->
</style></head>
<body class="oneColLiqCtrHdr">
<div id="container">
<div id="header">
<h1> </h1></div>
<!-- forms -->
<form action="http://projects.knord.dk/interaction/saveforminfo.aspx" method="post" onsubmit="return checkform(this);" >
<input type="hidden" name="surveyid" value="knjuku2" />
<input type="hidden" name="usecookie" value="true" />
<input type="hidden" name="landingpage" value="h---.html" />
<p align="center"><b>This survey was made for Business Academy Copenhagen North project not for FDIM.</b></p>
<p>
<b>Please enter your personal information</b>
</p>
<p><b>Your Occupation:</b>
<input type="text" name="occupation" />
</p>
<p><b>Age Group:</b>
<select name="age">
<option value="under 18">less then 18</option>
<option value="18-25">18-25</option>
<option value="26-35">26-35</option>
<option value="over 35">more then 35</option>
</select>
</p>
<p><b>Status:</b>
<select name="status">
<option value="single">Single</option>
<option value="single with children">Single with children</option>
<option value="in relationship">In relationship</option>
<option value="married">Married</option>
<option value="divorced">Divorced</option>
</select>
</p>
<p><b>Gender:</b>
<input type="radio" name="gender" value="male" /> Male
<input type="radio" name="gender" value="female" /> Female
</p>
<p><b>Do you have a job?</b>
<input type="radio" name="job" value="yes" />Yes
<input type="radio" name="job" value="no" />No
</p>
<p> </p>
<p>
<!-- 1 vopros -->
</p>
<p><b>1. Why do You use online social media?</b>
</p>
<p>
<input type="radio" name="bla" value="To chat with friends" />
To chat with friends<br></br>
<input type="radio" name="bla" value="To read news" /> To read news<br></br>
<input type="radio" name="bla" value="To write blogs" /> To write blogs<br></br>
<input type="radio" name="bla" value="Other" /> Other<br></br>
</p>
<p>
<!-- 2 vopros -->
<b>2. What online social media do You use more often?</b>
</p>
<p> </p>
<p>
<select name="more">
<option value="MySpace">MySpace</option>
<option value="Twitter">Twitter</option>
<option value="Facebook">Facebook</option>
<option value="LinkedIn">LinkedIn</option>
</select>
</p>
<p> </p>
<!-- 3 vopros -->
<b>3. When do You use it?</b>
<p>
<input type="radio" name="use" value="1" /> At home<br></br>
<input type="radio" name="use" value="2" /> At work<br></br>
<input type="radio" name="use" value="3" /> At school<br></br>
<input type="radio" name="iuse" value="4" /> In the bus/train<br></br>
<input type="radio" name="use" value="5" /> Other<br></br>
</p>
<p><b>4. How much hours approximately do You spend on social media?</b>
</p>
<select name="hours">
<option value="less than 2 hours">less than 2 hours a day</option>
<option value="2-4 hours">2-4 hours a day</option>
<option value="4-8 hours">4-8 hours a day</option>
<option value="8-12 hours">8-12 hours a day</option>
<option value="more than 12 hours">more than 12 hours a day</option>
</select>
<p> </p>
<p>
<!-- 5 vopros -->
<b>5. Do You use social media often?</b></p>
<p>
<input type="radio" name="often" value="Yes" />
Yes
<input type="radio" name="often" value="No" /> No
<!-- 6 vopros -->
</p>
<p><b>6. Social Media website to which You usually upload</b></p>
<p>
<input type="radio" name="upload" value="Youtube" /> Youtube<br></br>
<input type="radio" name="upload" value="Flickr" /> Flickr<br></br>
<input type="radio" name="upload" value="Photobucket" /> Photobucket<br></br>
<input type="radio" name="upload" value="Slideshare" /> Slideshare<br></br>
<input type="radio" name="upload" value="Other" /> Other
</p>
<!-- 7 vopros -->
<b>7. Where do You chat with Your friends</b>
<select name="chatting">
<option value="Msn">Msn</option>
<option value="Skype">Skype</option>
<option value="Yahoo!">Yahoo!</option>
<option value="Other">Other</option>
</select>
<p> </p>
<!-- 8 vopros -->
<b>8. You use social media for</b>
<select name="using">
<option value="Personal reasons">Personal reasons</option>
<option value="Professional reasons">Professional reasons</option>
<option value="Don't use it">Don't use it</option>
</select>
<p> </p>
<p>
<!-- 9 vopros -->
<b>9. You prefer to obtain the information You need at</b>
<select name="information">
<option value="Yahoo!">Yahoo!</option>
<option value="Google">Google</option>
<option value="Wikipedia">Wikipedia</option>
<option value="Ask">Ask</option>
<option value="Other">Other</option>
</select>
</p>
<!-- 10 vopros -->
<b>10. What do You prefer to do being online</b>?
<select id="drop" name="online">
<option value="Read blogs">Read blogs</option>
<option value="Chat with friends">Chat with friends</option>
<option value="Watch videos">Watch videos</option>
<option value="Read news">Read news</option>
<option value="Other">Other</option>
</select>
<!-- konec voprosov -->
<!-- button-submit -->
<p align="center">
<input type="submit" value="Submit" />
</p>
</form>
<!-- end #container -->
</div>
</body>
</html>
Javascript validation Code:
//Javascript Document
function checkform ( form )
{
if (form.occupation.value == "") {
alert( "Please enter your occupation." );
form.occupation.focus();
return false ;
}
return true ;
}
function checkform(f) {
for (var i=0; i<f.elements("gender").length;
i++) {
var radio = f.elements("gender")[i];
if (radio.checked) {
return true;
}
}
// no checked radio button found
window.alert("Choose your gender!");
f.elements("gender")[0].focus();
return false;
}
function checkform(f) {
for (var i=0; i<f.elements("job").length;
i++) {
var radio = f.elements("job")[i];
if (radio.checked) {
return true;
}
}
// no checked radio button found
window.alert("Choose if you have a job!");
f.elements("job")[0].focus();
return false;
}
function checkform(f) {
for (var i=0; i<f.elements("bla").length;
i++) {
var radio = f.elements("bla")[i];
if (radio.checked) {
return true;
}
}
// no checked radio button found
window.alert("Answer question number 1");
f.elements("bla")[0].focus();
return false;
}
function checkform(f) {
for (var i=0; i<f.elements("use").length;
i++) {
var radio = f.elements("use")[i];
if (radio.checked) {
return true;
}
}
// no checked radio button found
window.alert("Answer question number 3!");
f.elements("use")[0].focus();
return false;
}
function checkform(f) {
for (var i=0; i<f.elements("often").length;
i++) {
var radio = f.elements("often")[i];
if (radio.checked) {
return true;
}
}
// no checked radio button found
window.alert("Answer question number 5!");
f.elements("often")[0].focus();
return false;
}
function checkform(f) {
for (var i=0; i<f.elements("upload").length;
i++) {
var radio = f.elements("upload")[i];
if (radio.checked) {
return true;
}
}
// no checked radio button found
window.alert("Answer question number 6!");
f.elements("upload")[0].focus();
return false;
}
Where is my mistake? And how to solve it to make javascript validation work properly? 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
}
});
});
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 there, I need help in form validation! I want this to be validated upon selection of the drop down list (not when it comes to submit button) I have 2 drop down lists: Starting date (June 5th, 6th 7th) Ending date (June 5th, 6th 7th) I want to write a script that would NOT ALLOW one to choose: - Starting date June 6th and Ending date June 5th - Starting date June 7th and Ending date June 6th - Starting date June 7th and Ending date June 5th I appreciate your help Thank you for your reply. With the code I had to acknowledge nothing had been inserted,(that is, still spaces, it was working. When I added the code to only accept alpha chars etc., I inserted numbers, nothing worked, with no error message. Would you, or can I send the whole code through for the form. I noticed that the form tags had been changed so I altered them as well according to your message. Hello fellow programmers, I am having some trouble with my javascript doing what I want it to, which is returning values (true/false || 1/0). I haven't used much javasript but I am experienced with C#, Java, Python etc so this is sort of new to me syntax wise. Here is what I have so far: http://jsfiddle.net/HpSyJ/1/ note: for some reason css doesn't like jsfiddle :S, the error messages are hidden in my Notepad++ & firefox combo though Really all I want is when I hit submit, it runs an alert or changes the error message to visible. Can someone please have a quick read over and see if anything jumps out at them? Thanks in advance, Andrew 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> I am trying to set up a looping structure that tests to see if the user enters a value. If the textbox is null then a global variable is false otherwise a checkbox is checked and the global variable is true. below is what i have done so far, please assist me. var isValid = false; window.onload = startForm; function startForm() { document.forms[0].firstName.focus(); document.forms[0].onsubmit = checkEntries; alert("You have been added to the list") } function checkEntries() { var menus = new Array(); var formObject = document.getElementsByTagName('*'); for (var i=0; i < formObject.length; i++){ if (formObject[i] == "myform") menus.push(formObject[i]); if (document.forms[0].firstName.value.length==0 || document.forms[0].firstName.value.length == null){ isValid= false; alert("Please enter a first name"); } else (document.forms[0].check0.checked=true); isValid=true; if (document.forms[0].lastName=="" || document.forms[0].lastName== null){ alert("Please enter a last name"); isValid = false; } else (document.forms[0].check1.checked=true); isValid=true; if (document.forms[0].email=="" || document.forms[0].email== null) { alert("Please enter a valid email"); } else return (document.forms[0].check0.checked=true); isValid=true; if (document.forms[0].bDate=="" || document.forms[0].bDate== null) { isValid=false; alert("please make sure you enter a valid birth date."); } else (document.forms[0].check0.checked=true); isValid=true; } } here is the form html... <form name="myform" > <input type="checkbox" name="check0" class="check0" id="check0" > First: <input type="text" name="firstName" id="firstName"> <BR> <input type="checkbox" name="check1" class="check1" id="check1" > Last: <input type="text" name="lastName" id="lastName" ><BR> <input type="checkbox" name="check2" class="check2" id="check2" > E-Mail: <input type="text" name="email" id="email"> <BR> <input type="checkbox" name="check3" class="check3" id="check3" > Birthday (mm/dd/yyyy): <input type="text" name="bDate" id="bDate"> <BR> <input type="submit" value="Join our mailing List" /> </form> |