|
JavaScript - Datepickers Used For Date Range - Help With Setting Min And Clearing On Refresh
I'm working with datepickers to select a date range for my travel site (so they are a departure date and a return date). There are two datepickers and I can't get the min date on the first calendar set to today, and I also can't figure out how to get the date fields to clear if the user clicks the browsers refresh button - please help!
Here's the javascript code I'm currently trying to run: $(function() { var dates = $("#datepicker1, #datepicker2").datepicker({ defaultDate: '', minDate: '+0m +0w +0d', // this isn't working to set the earliest selectable date to today maxDate: '+0m +0w +365d', // but oddly enough this one works to make sure users can't select a date farther than a year out numberOfMonths: 2, beforeShow: function() { var other = this.id == "from" ? "#datepicker2" : "#datepicker1"; var option = this.id == "from" ? "maxDate" : "minDate"; var selectedDate = $(other).datepicker('getDate'); $(this).datepicker("option", option, selectedDate); } }).change(function(){ var other = this.id == "from" ? "#datepicker2" : "#datepicker1"; if($('#datepicker1').datepicker('getDate') > $('#datepicker2').datepicker('getDate')) $(other).datepicker('setDate', $(this).datepicker('getDate')); }); }); // this is the function I wrote to try to clear the fields when browser refresh is clicked but it doesn't do anything function clearInp() { document.getElementById('datepicker1').value = ""; document.getElementById('datepicker2').value = ""; } Here's the corresponding HTML code: <form method="POST" name="myForm2" class="calendars"> <input id="datepicker1" type="text" name="departure_date" class="dates" size="15" maxlength="25" /> to <input id="datepicker2" type="text" name="return_date" class="dates" size="15" maxlength="25" /> </form> Thanks in advance! Similar TutorialsI want to validate two a date range using javascript, so that my program would check startdate less than end date. The below function only check the year, and it works. Code: function validate()
{
var start=document.entry.datum1.value;
year = start.substr(0, 4);
month = start.substr(5, 2);
dayval = start.substr(8, 2);
var end=document.entry.datum2.value;
year1 = end.substr(0, 4);
month1 = end.substr(5, 2);
dayval1 = end.substr(8, 2);
var myDate=new Date();
myDate.setFullYear(year,month,dayval);
var today = new Date();
today.setFullYear(year1,month1,dayval1);
if (myDate> today)
{
alert("The start date must come before the end date");
return false
}
return true;
}
But I have write a function for checking the whole date value and it didnt work. My date is in format- 2008-10-23(yyyy-mm-dd) Code: function validate()
{
var start=entry.datum1.value;
year = start.substr(0, 4);
month = start.substr(5, 2);
dayval = start.substr(8, 2);
intyear = parseInt(year, 10);
intmonth = parseInt(month, 10);
intdayval = parseInt(dayval, 10);
var end=entry.datum2.value;
year1 = end.substr(0, 4);
month1 = end.substr(5, 2);
dayval1 = end.substr(8, 2);
intyear1 = parseInt(year1, 10);
intmonth1 = parseInt(month1, 10);
intdayval1 = parseInt(dayval1, 10);
var startDate = Date.parse(intyear,intdayval,intmonth);
var endDate = Date.parse(intyear1,intdayval1,intmonth1);
if (startDate > endDate)
{
alert("The start date must come before the end date");
return false;
}
return true;
}
Please help Hi Guys, I am creating a 12 months events calendar and need javascript to compare a date range and apply a corresponding image banner once to the earliest instance of a particular date range eg: I want to have a banner image for the earliest date in the January to May date range and same for June to December (seperate image). The event dates get generated via a CMS using {event_start_date format="%F %j%S , %Y"} [APPLY JANUARY - MAY BANNER IMAGE] eg jm.jpeg January 3rd, 2011 Event 1 January 23, 2011 Event 2 Feb 24th,2011 Event 3 March 21st, 2011 Event 4 [APPLY JUNE - DEC BANNER IMAGE] eg jd.jpeg JUNE 30th, 2011 Event 5 September 12th, 2011 Event 6 [APPLY JANUARY - MAY BANNER IMAGE] eg jm.jpeg January 1st, 2012 Event 7 THANKS!!!!!!!!!! Hello, First I would like to say I am not a coder. I would like to have a specific date range in years entered into a text box and if anything else is entered a pop up alert would appear. The date range would be from 1912 to 2002. Any help with this would be greatly appreciated. I am using Joomla 2.5 and a form constructor called RS Form Pro That allows JS to be used. This is the Javascript I am trying to use: Code: <script type="text/javascript">
function checkDate(theForm)
year=document.getElementById('YearBorn').value;
if(year<1912 || year>2002)
{
alert("registration is restricted to those born between 1912 to 2002");
return false;
else {
return true;
}
}
</script>
This is how I am trying to call it Code: onblur="return checkDate(this);" I am not sure if I am calling it correctly or if the JS code is even correct. When the user enters the date and it is not within the date range I need the alert to pop up. Thank you for any help you can provide DeZiner Hi, I am using jQuery datepicker's date range, I have a dynamic form where date range fields are added dynamically, for this reason I have set the two selectors for jQuery date range to classes. Below is my code: Code: $( ".datepicker_start_date, .datepicker_end_date" ).livequery(function() {
var dates = $( ".datepicker_start_date, .datepicker_end_date" ).datepicker({
defaultDate: "+1w",
changeMonth: false,
dateFormat: 'dd-mm-yy',
numberOfMonths: 1,
onSelect: function( selectedDate ) {
var getclass = $(this).attr("class");
var option = getclass.indexOf("datepicker_start_date") != -1 ? "minDate" : "maxDate",
instance = $(this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
});
The above works perfect if I have just two field to range the date such as fields with class .datepicker_start_date and .datepicker_end_date. But if I have multiple fields like have 3-4 more date range fields, it will just mess the dates and add dates of field1 to field 3 and vice versa. I would appreciate if someone could help. Many Thanks I'm wanting to put a piece of code on my website that will display when our next meeting will be. We have 2 meetings per month. I'm thinking what I need to do is create a code that gets the current month, day of month, and year then combines it together somehow, and if that combination is in a certain range a particular statement, "Next meeting is MM, DD YY." or "Next meeting is today." is displayed. If date is equal to or between 01012012 and 01112012, "Next meeting is January, 12 2012" is displayed. If date is equal to 01122012, "Next meeting is today" is displayed. If date is equal to or between 01132012 and 01252012, "Next meeting is January, 26 2012" is displayed. If date is equal to 01262012, "Next meeting is today" is displayed. ...that kind of thing. How would I combine the month, day of month, and year? Would 48 if statements be what I need to do? Sorry, I'm pretty new to javascript. If there's a better way to do this, please let me know. Thanks, CJ Hey guys, First shot at JS so please be gentle! I'm trying to get this script to clear the default value of my input elements on focus. It works well the first time, however, if a user inputs some fresh text, selects something else, then selects the same input element again, it will clear the text they entered. Make sense? Here's the script (thanks in advance!!): Code: <script language="JavaScript">
function clickFocus(input){
input.className = 'focus';
if (input.value = input.defaultValue){
input.value = '';
}
}
function unFocus(input){
input.className = 'entered';
if (input.value == ''){
input.value = input.defaultValue;
input.className = 'normal'
}
}
</script>
<form action="confirmation.php" method="post" enctype="multipart/form-data" name="form" id="form" onsubmit="return checkForm(this)">
<input type="text" name="name" value="Name" onfocus="clickFocus(this)" onblur="unFocus(this)" />
<input type="text" name="email" value="Email" onfocus="clickFocus(this)" onblur="unFocus(this)" />
<input type="text" name="subject" value="Subject" onfocus="clickFocus(this)" onblur="unFocus(this)" />
<textarea type="text" name="message" onfocus="clickFocus(this)" onblur="unFocus(this)" rows="5">Message</textarea>
<input class="submit" name="submit"type="submit" value="Send Message" />
</form>
I am trying to make the date that is entered by the user within the pickDate text box be +2 days ahead of the current date. Code: function reserveDate(){
var mydate = new Date();
var theyear = mydate.getFullYear();
var themonth = mydate.getMonth()+1;
var thetoday = mydate.getDate()+2;
if (document.forms[0].pickDate.value <= thetoday)
window.alert("Reservations need to be two days in advance.");
}
input type="text" name="pickDate" onblur="return reserveDate(this.value);">
Hi, I have the below code: Code: <script type="text/javascript">
function loadQuickMessageCheck(File,ID){
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
eucalyptus = setInterval(function(){loadQuickMessageCheck(File,ID)},20000);
}
}
xmlhttp.open("POST",File,true);
xmlhttp.send();
}
</script>
But I am overloading the server and crashing it. I've googled the issue and have found people with similar problems who talk about the need to cancel the last refresh request before they send the next refresh. I even found this nice piece of code which worked for someone else. Quote: try{window.clearTimeout(tRefresh)} catch(err) {} tRefresh = setInterval(setContext, varInterval*60*1000); } I am not sure if this is the solution that I am looking for but if it is all my attempts at applying this code has been a bit of a disaster. Hi all, Could someone explain the W3C DOM Range to me? Please note that I want to know how to do it with a standard W3C range, NOT an MSIE text range. Please don't simply point me to a web link ... I've seen all of those and I still don't get it. What I am trying to do is get a user's selection range (which I can already do), then modify it by adding information to the beginning and ending of the range. Specifically, I am trying to "wrap" a range with some extra text... like this: (1) This is a sentence written by the user. <- original (2) This is a sentence written by the user. <- user's selection (3) This is a [bbcode] sentence written [/bbcode] by the user. <- added text. note that the user's selection REMAINS SELECTED after the bbcode is added. What I need to know is how to add the information to the range. Do I change the range start and end points? Do I have to convert the text into an element (i.e. document.createElement('span')) before I insert it? Please explain to me how to use the DOM range... and do it in a "DOM range for dummies" manner, because I simply am not understanding what I see in web searches. Thanks! -- Roger Hi, Is it possible in Javascript to verify a range of IP's for open port 80 and show as a hiperlink? The ideia is similar to ip scanners but it's for a web spider... Thanks Reply With Quote 01-11-2015, 01:04 PM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Not possible IMO. Javascript cannot access or interact with the operating system. All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit. Hi all, First of all, I am not a student and this is not homework. Secondly, I've been programming in C, Motorola assembler, Intel assembler and even GWBasic for years. I recently (this year) got into Web / Javascript / PHP / HTML programming and I'm clawing up the learning curve. I know a fair amount, but have a long way to go. OK here's my problem: I've been trying to integrate a WYSIWYG editor (TinyMCE) into a bulletin board software package (PHPBB3). All is working well except for one big stumbling block that I've been battling for the past MONTH!...: I want to support the original BBCode system of PHPBB3 (mostly because of the ability for the admin to add custom BBCodes). So, what I need to do is this: (1) Select a range of text. (2) Either REPLACE it with "[tag]selection[/tag]" or else INSERT "[tag]" before and "[/tag]" after. (3) Lastly, the original selection must remain selected so that additional BBCodes can be wrapped without the need to re-select. The purpose of (3) is, say, the user clicks "bold" and "italic" and "underline".... all they should have to do is click those 3, not re-select each time. I've tried doing this: (1) get the selection range (2) get the selection text (3) delete the range contents (4) create two "contextual fragments" (one for the opening tag, the other for the closing tag). (5) create a <span> element containing the selection text (6) Insert it all into the range with range.insertNode() (7) finally select the new span element This seems to work fine, but Internet Explorer fails (it complains when I try to get the selection range). I just don't know what I'm doing wrong... and worse I'm not even sure if I'm attacking the problem the proper way. Any ideas would be greatly appreciated! Thanks! -- Roger I AM TRYING TO VALIDATE THE AGE RANGE SO THAT IT CAN ACCEPT AN AGE BETWEEN 16 - 99 BUT SOME HOW IM NOT GETTING THROUGH CAN ANYONE HELP ME WITH THAT PLEASE THANKS IN ADVANCE Code: <html>
<head>
<title>Registration</title>
<script type="text/javascript">
function validation(form) {
var invalid =" ";
var minlength = 6;
var emailchar =/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var numchar =/(^\d+$)|(^\d+\.\d+$)/;
var userName = registration.u_name.value;
var firstName = registration.f_name.value;
var lastName = registration.l_name.value;
var yourage = registration.age.value;
var pw1 = registration.pwd.value;
var pw2 = registration.pwd1.value;
var em_adss = registration.e_address.value;
if (userName.length ==""){
alert("Please enter your USERNAME.");
return false;
}
if ((userName.length < 5) || (userName.length > 15)) {
alert("User name must be between 5 and 15 characters");
return false;
}
if (firstName.length ==""){
alert("Please enter your FIRSTNAME.");
return false;
}
if (lastName.length ==""){
alert("Please enter your LASTNAME.");
return false;
}
if (yourage.length ==""){
alert("Please enter your AGE.");
return false;
}
if (! registration.age.value.match(numchar)){
alert ("Please enter a valid age.");
return false;
}
if ((age < 16) && (age >99)){
alert ("Please enter and valid age range");
return false;
}
if (pw1 == '' || pw2==''){
alert ("Please enter password twice");
return false;
}
if (registration.pwd.value.length < minlength){
alert ("Your password must be at least" + minlength + "characters in length.");
return false;
}
if (registration.pwd.value.indexOf (invalid) > -1) {
alert("Spaces are not allowed in the password");
return false;
}
if (pw1 != pw2) {
alert ("Your passwords didn't match. Please re-enter");
return false;
}
if (em_adss.length ==""){
alert("Please enter your EMAIL.");
return false;
}
if (! registration.e_address.value.match(emailchar)){
alert("Stop playing games.\n Please enter a valid email address");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="registration" action="response.html" method="get" onSubmit="return validation(this);">
USERNAME:<br>
Between 5-15 characters.
<input name="u_name" type="text" size="35" maxlength="50">
<br><br>
FIRSTNAME:
<br>
Enter your first name.
<input name="f_name" type="text" size="35" maxlength="50">
<br><br>
LASTNAME:
<br>
Enter your last name.
<input name="l_name" type="text" size="35" maxlength="50">
<br><br>
AGE:
<br>
Enter your age. (16-99)
<input name="age" type="text" size="35" maxlength="50">
<br><br>
PASSWORD:
<br>
Enter your password.
<input name="pwd" type="password" size="35" maxlength="50">
<br><br>
VERIFY PASSWORD:
<br>
Verify your password.
<input name="pwd1" type="password" size="35" maxlength="50">
<br><br>
EMAIL:
<br>
Enter your email address.
<input name="e_address" type="text" size="35" maxlength="50">
<br><br>
<input type="submit" value="Submit Information" name="submit">
<input name="reset" type="reset" value="Reset Information">
</form>
</body>
</html>
I'm sort of new at JS and trying to have an option to clear the fields by pressing the clear fields button, but nothing happens. This should be correct but for some odd reason it's not.. In addition, I have to edit my fuction doSubmit so once submitted an alert box with all the information is in it.. Does that make sense So the alert should be: John Does 462 Smith St Johnston, NC 44524 Email@com 214-854-6555 Etc Code: <script>
function doClear()
{
document.PizzaForm.customer.value = "";
document.PizzaForm.address.value = "";
document.PizzaForm.city.value = "";
document.PizzaForm.state.value = "";
document.PizzaForm.zip.value = "";
document.PizzaForm.phone.value = "";
document.PizzaForm.email.value = "";
document.PizzaForm.sizes[0].checked = false;
document.PizzaForm.sizes[1].checked = false;
document.PizzaForm.sizes[2].checked = false;
document.PizzaForm.sizes[3].checked = false;
document.PizzaForm.toppings[0].checked = false;
document.PizzaForm.toppings[1].checked = false;
document.PizzaForm.toppings[2].checked = false;
document.PizzaForm.toppings[3].checked = false;
document.PizzaForm.toppings[4].checked = false;
document.PizzaForm.toppings[5].checked = false;
document.PizzaForm.toppings[6].checked = false;
document.PizzaForm.toppings[7].checked = false;
return;
}
function doSubmit()
{
alert("Your pizza order has been submitted.");
return;
}
</script>
</head>
<body>
<form name="PizzaForm">
<h1>Pizza Parlor</h1>
<p>
<h4>Step 1: Enter your name, address, phone number, and email address:</h4>
<font face="Courier New">
Name: <input name=:customer" size="50" type="text"><br>
Address: <input name="address" size="50" type="text"><br>
City: <input name="city" size="15" type="text">
State: <input name="state" size="2" type="TEXT">
Zip: <input name="zip" size="5" type="text"><br>
Phone: <input name="phone" size="50" type="text"><br>
Email: <input name="email" size="50" type="text"><br>
</font>
</p>
<p>
<h4>Step 2: Select the size of pizza you want:</h4>
<font face="Courier New">
<input name="sizes" type="radio">Small
<input name="sizes" type="radio">Medium
<input name="sizes" type="radio">Large
<input name="sizes" type="radio">Jumbo<br>
</font>
</p>
<p>
<h4>Step 3: Select the pizza toppings you want:</h4>
<font face="Courier New">
<input name="toppings" type="checkbox">Pepperoni
<input name="toppings" type="checkbox">Canadanian Bacon
<input name="toppings" type="checkbox">Sausage<br>
<input name="toppings" type="checkbox">Mushrooms
<input name="toppings" type="checkbox">Pineapple
<input name="toppings" type="checkbox">Black Olives<br>
<input name="toppings" type="checkbox">Extra Cheese
<input name="toppings" type="checkbox">Green Peppers<br>
</font>
</p>
<input type="button" value="Submit Order" onClick="doSubmit()">
<input type="button" value="Clear Entries" onClick="doClear()">
</form>
</body>
Hi I'm relatively new to Javascript and I'm trying to learn more about dates my problem is as follows I have to do validation on a form for 2 dates(StartDate and EndDate) the dates cannot be more than four months apart if they are an alert must be displayed. In other words Nov 2009 till March 2010 or May 2009 till September 2009 should be invalid regardless of the day of the month Simply 2 input boxes(StartDate and EndDate) and a submit I've got the other parts of my page worked out just this has me stumped I would appreciate any help in this regard Thank You for your time Hi all, can someone help me what is the right syntax to use for field that carry hidden value same as autoincrement value in db. The form was able to add n delete this value from db make it the hidden value keep changing. it is possible to check range validation for the value? in this case the hidden value is sid. How to correct the line below? --> var chkVal = theForm.("score1"&&sid).value the full script as below. <script> function Form1_Validator(theForm) { // require that the To Field be greater than or equal to the From Field var chkVal = theForm.("score1"&&sid).value var chkVal2 = theForm.("score2"&&sid).value if (chkVal != "" && !(chkVal >= chkVal2)){ alert("The \"Score Range 2\" value must be greater than the \"Score Range 1\" value."); theForm.("score2"&&sid).focus(); return (false); } } </script> Hi, i have a problem to validate time range in javascript. i've search in the website and found some example. below is the my coding Code: function timeCheck(){
branchCode = <%=sessionUser.getBranchCode()%>;
var d = new Date();
var curr_hour = d.getHours();
var curr_min = d.getMinutes();
if (curr_min < 10){
curr_min = "0" + curr_min
}
var currtime = curr_hour + ":" + curr_min;
if(branchCode >= 1 && branchCode <= 5){
st = "7:30"; et = "9:00";
} else if(branchCode >= 6 && branchCode <= 10){
st = "9:01"; et = "10:30";
} else if(branchCode >= 11 && branchCode <= 15){
st = "10:31"; et = "12:00";
} else if(branchCode >= 16 && branchCode <= 20){
st = "12:01"; et = "13:30";
} else if(branchCode >= 21 && branchCode <= 26){
st = "13:31"; et = "15:00";
} else if(branchCode >= 27 && branchCode <= 31){
st = "15:01"; et = "16:30";
} else if(branchCode >= 32 && branchCode <= 71){
st = "16:31"; et = "18:00";
} else {
st = "6:30"; et = "19:00";
}
if(validate_time(currtime,st,et)){
alert("Cannot access this page");
location.href='<%=request.getContextPath()%>/security/welcome.do';
}
}
function validate_time(currtime,st,et ){
currtime = currtime.split(/:/);
st = st.split(/:/);
et = et.split(/:/);
return (
currtime[0] < st[0]
|| currtime[0] > et[0]
|| (currtime[0] == st[0] && currtime[1] < st[1])
|| (currtime[0] == et[0] && currtime[1] > et[1])
);
//return TRUE if time not in range
}
i want to control user's access to the page. they can only access within the range given. example: current time = 10:14 st = 9:01 et = 10:30 When I test, the currtime[0] < st[0] return true. I don't understand why the statement return true. can someone help me? Thanks in advance. Hi all, can someone help me what is the right syntax to use for field that carry hidden value same as autoincrement value in db. The form was able to add n delete this value from db make it the hidden value keep changing. it is possible to check range validation for the value? in this case the hidden value is sid. How to correct the line below? --> var chkVal = theForm.("score1"&&sid).value the full script as below. <script> function Form1_Validator(theForm) { // require that the To Field be greater than or equal to the From Field var chkVal = theForm.("score1"&&sid).value var chkVal2 = theForm.("score2"&&sid).value if (chkVal != "" && !(chkVal >= chkVal2)){ alert("The \"Score Range 2\" value must be greater than the \"Score Range 1\" value."); theForm.("score2"&&sid).focus(); return (false); } } </script> Hi all, can someone help me what is the right syntax to use for field that carry hidden value same as autoincrement value in db. The form was able to add n delete this value from db make it the hidden value keep changing. it is possible to check range validation for the value? in this case the hidden value is sid. How to correct the line below? --> var chkVal = theForm.("score1"&&sid).value the full script as below. <script> function Form1_Validator(theForm) { // require that the To Field be greater than or equal to the From Field var chkVal = theForm.("score1"&&sid).value var chkVal2 = theForm.("score2"&&sid).value if (chkVal != "" && !(chkVal >= chkVal2)){ alert("The \"Score Range 2\" value must be greater than the \"Score Range 1\" value."); theForm.("score2"&&sid).focus(); return (false); } } </script> okay. clearing a form. I have a clear button. when I push it, I want all the red text boxes and onblur messages to disappear. anyone have an idea on where i can start? heres javascript Code: function isFormValid()
{
var userF = document.getElementById('FName').value;
var userL = document.getElementById('LName').value;
var userPW = document.getElementById('pw').value;
var userPW2 = document.getElementById('pw2').value;
var userBDay = document.getElementById('BDay').value;
var userEmail = document.getElementById('email').value;
var NameFormat = /^[A-Za-z]{2,12}$/;
var PWFormat = /^[A-Za-z0-9]{6,12}$]/;
var BDayFormat = /^(\d{1,2})[\s\.\/-](\d{1,2})[\s\.\/-](\d{4})$/;
var EmailFormat = /^([\w-]{2,})@([A-z\d][-A-z\d]+)\.[A-z]{2,8}/;
var retVal = true;
var errorMsg = "";
if (!NameFormat.test(userF))
{
assignErrorClass("FName");
errorMsg = "First Name is required. 2-12 letters only\n";
retVal = false;
}
if (!NameFormat.test(userL))
{
assignErrorClass("LName");
errorMsg = errorMsg + "Last Name is required. 2-12 letters only\n";
retVal = false;
}
if (!PWFormat.test(userPW))
{
assignErrorClass("pw");
errorMsg = errorMsg + "Password is required. 6-12 letters or numbers only.\n";
retVal = false;
}
if (userPW2 == "")
{
assignErrorClass("pw2");
errorMsg = errorMsg + "Please Retype password.\n";
retVal = false;
}
if ((userPW != userPW2) && (userPW2 !== ""))
{
assignErrorClass("pw2");
errorMsg = errorMsg + "Passwords do not match.\n";
retVal = false;
}
if (userBDay == "")
{
assignErrorClass("BDay");
errorMsg = errorMsg + "Please Enter a Birthday.\n";
retVal = false;
}
if ((!BDayFormat.test(userBDay)) && (userBDay !== ""))
{
assignErrorClass("BDay");
errorMsg = errorMsg + "Incorrect Birthday format\n";
retVal = false;
}
if (badBirthday("BDay") && (userBDay !== "")) {
assignErrorClass("BDay");
retVal = false;
errorMsg = errorMsg + "Invalid Birthday\n";
}
if (userEmail == "")
{
assignErrorClass("email");
errorMsg = errorMsg + "Please Enter an Email address.\n";
retVal = false;
}
if ((!EmailFormat.test(userEmail)) && (userEmail !== ""))
{
assignErrorClass("email");
errorMsg = errorMsg + "Please Enter a valid Email address.\n";
retVal = false;
}
if (!retVal)
{
alert( errorMsg);
}
return retVal;
}
function assignErrorClass(objName)
{
var obj = document.getElementById(objName);
obj.className = "err";
}
function badBirthday( objName) {
var obj = document.getElementById(objName);
var dateStr = obj.value;
var mn = dateStr.split("/")[0];
var dy = dateStr.split("/")[1];
var yr = dateStr.split("/")[2];
var dateObj = new Date(yr,mn-1,dy); //JavaScript and PHP number the months 0 to 11.
if (dateObj.getFullYear() != yr || dateObj.getMonth()+1 != mn || dateObj.getDate() != dy) {
return true;
} else {
return false;
}
}
function checkFName()
{
var userF = document.getElementById('FName').value;
var elementF = document.getElementById('labelFName');
var NameFormat = /^[A-Za-z]{2,12}$/;
if (!NameFormat.test(userF))
{
elementF.innerHTML = "First Name is required. 2-12 letters only";
elementF.style.color = "red";
}
else
{
elementF.innerHTML = "";
elementF.style.color = "green";
}
}
function checkLName()
{
var userL = document.getElementById('LName').value;
var elementL = document.getElementById('labelLName');
var NameFormat = /^[A-Za-z]{2,12}$/;
if (!NameFormat.test(userL))
{
elementL.innerHTML = "Last Name is required. 2-12 letters only";
elementL.style.color = "red";
}
else
{
elementL.innerHTML = "";
elementL.style.color = "green";
}
}
function checkpw()
{
var userPW = document.getElementById('pw').value;
var elementPW = document.getElementById('labelpw');
var PWFormat = /^[A-z0-9]{6,12}$/;
if (!PWFormat.test(userPW))
{
elementPW.innerHTML = "Password is required. 6-12 letters or numbers only.";
elementPW.style.color = "red";
}
else
{
elementPW.innerHTML = "Good Password";
elementPW.style.color = "green";
}
}
function checkpw2()
{
var userPW2 = document.getElementById('pw2').value;
var userPW = document.getElementById('pw').value;
var elementPW2 = document.getElementById('labelpw2');
if ((userPW != userPW2) && (userPW2 !== ""))
{
elementPW2.innerHTML = "Passwords do not match.";
elementPW2.style.color = "red";
}
else if (userPW2 == "")
{
elementPW2.innerHTML = "Please Retype password.";
elementPW2.style.color = "red";
}
else
{
elementPW2.innerHTML = "Passwords Match";
elementPW2.style.color = "green";
}
}
function checkBDay()
{
var userBDay = document.getElementById('BDay').value;
var elementBDay = document.getElementById('labelBDay');
var BDayFormat = /^(\d{1,2})[\s\.\/-](\d{1,2})[\s\.\/-](\d{4})$/;
if (userBDay == "")
{
elementBDay.innerHTML = "Please enter A Birthday.";
elementBDay.style.color = "red";
}
else if ((!BDayFormat.test(userBDay)) && (userBDay !== ""))
{
elementBDay.innerHTML = "Please enter mm/dd/yyyy format.";
elementBDay.style.color = "red";
}
else if ((badBirthday("BDay")) && (userBDay !== ""))
{
elementBDay.innerHTML = "Please enter valid Birthday.";
elementBDay.style.color = "red";
}
else
{
elementBDay.innerHTML = "";
elementBDay.style.color = "green";
}
}
function checkEmail()
{
var userEmail = document.getElementById('email').value;
var elementEmail = document.getElementById('labelEmail');
var EmailFormat = /^([\w-]{2,})@([A-z\d][-A-z\d]+)\.[A-z]{2,8}/;
if ((!EmailFormat.test(userEmail)) && (userEmail !== ""))
{
elementEmail.innerHTML = "Please enter a Valid Email address.";
elementEmail.style.color = "red";
}
else if (userEmail == "")
{
elementEmail.innerHTML = "Please enter an Email address.";
elementEmail.style.color = "red";
}
else
{
elementEmail.innerHTML = "";
elementEmail.style.color = "green";
}
}
heres the html Code: <form action="mailto:hummdedum@felloff.com" method="post" name="form" onSubmit="return isFormValid();">
* First Name: <input type="text" name="FName" id="FName" onblur="checkFName();"/><label id="labelFName"></label><br />
* Last Name: <input type="text" name="LName" id="LName"onblur="checkLName();"/><label id="labelLName"></label><br />
* Password: <input type="password" id="pw" name="Password" onblur="checkpw();"/><label id="labelpw"></label><br />
*Re-type Password: <input type="password" name="2Password" id="pw2" onblur="checkpw2();" /><label id="labelpw2"></label><br />
I am a: <br />
<input type="radio" name="status" value="fresh" /> Freshman<br />
<input type="radio" name="status" value="soph" /> Sophomore<br />
<input type="radio" name="status" value="jr" /> Junior<br />
<input type="radio" name="status" value="sr" /> Senior<br />
I am taking classes in the: <br />
<input type="checkbox" name="semester" value="fall" /> fall time<br />
<input type="checkbox" name="semester" value="spring" /> Spring time <br />
My favorite element is:
<select name="element" id="element">
<option value="">select</option>
<option value="fire">Fire</option>
<option value="earth">Earth</option>
<option value="water">Water</option>
<option value="air">Air</option>
</select><br />
*Birthday: mm/dd/yyyy<input type="text" id="BDay" name="Birthday" onblur="checkBDay();"/><label id="labelBDay"></label><br />
*E-Mail: <input type="text" id="email" name="Email" onblur="checkEmail();"/><label id="labelEmail"></label><br />
<input type="submit" value="Submit" />
<input type="reset" value="Clear" />
</form>
css i guess would be Code: .err {
border: 2px solid #FF0000;}
#errMsg {
font-size: 110%;
color: #FF0000;}
super thanks!!!!!! -pumpkin |
|||||||