JavaScript - Range Validation

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

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!!!!!!!!!!

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 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

I 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,

I am trying to link the <input type="range" min="450" max="800" value="500" /> to a CSS style for an AP box so when you move the slider
it then changes the Css style (top:--px). allowing the Ap box to move with the slider.

(important to work in Chrome)

Here is the 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:214px;
top:34px;
width:141px;
height:164px;
z-index:1;
background-color:#3FF
}
-->
</style>
</head>

<body>

<div id="apDiv1"><p>have an image in here. Need to make this box move up and down with the slider.</p></div>
<input type="range" min="450" max="800" value="500" />

</body>
</html>
[CODE]

I have tried a number of way but can't get it, I am sure it is simple.

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 all,

I am trying to wrap a text selection with BBCode. I have it working, but there is one final part I need help with.

First, here's the code I'm using:
Code:

    var range = ed.selection.getRng(true);
    var s = ed.dom.create('span', {}, '');
    range.surroundContents(s);
    s.innerHTML = open + s.innerHTML + close;
    ed.selection.select(s);

This is an explanation of each line:
get the user's selection as a W3C compatible range create an empty <span> element surround the selection range with the span convert the selection from "selection" to "[bbcode]selection[/bbcode]" by using innerHTML select the new <span> element
Of course, selecting the span ALSO selects the BBCode open and close tag... like in this pictu



So, the last thing I need to do (the whole point of this post)... how do I MOVE the range start and end points so that only the selection is selected and NOT the whole thing?

I will greatly appreciate if someone can tell me how to move those selection start and end points...

Thanks!

-- Roger

So I've got my code ready to generate a random number between a certain range and printing it out in text. What I'm trying to accomplish with this code is to print the actual image as well as the text.

I'm aware that there is an error in my document.write line, and that it's not the best solution. I was hoping for some suggestions to change/improve this last bit. Thanks in advance!

Code:

<html>
<title>RANDOM IMAGE TO NUMBER RANGE</title>
<body>
<center>
<script language="javascript" type="text/javascript">
var ranges = [
    { from: 11, image: "image4.jpg" },
    { from: 1, image: "image3.jpg" },
    { from: -9, image: "image2.jpg" },
    { from: -20, image: "image1.jpg" }      
];

var random_num = (Math.round((Math.random()*41)+-20));
var image = "default";

for(var i = 0; i < ranges.length; ++i) {
    if(random_num >= ranges[i].from) {
        image = ranges[i].image;
        break;
    }
}
{
document.write("Text: " + random_num + " Text, " + " Image: = " + image);
{
document.write('<img src="images/' + ranges[i].image);
}
}
</script>
<br></br>
<div>
CLICK <a href="javascript:history.go(0);">REFRESH or F5</a> FOR A RANDOM IMAGE on NUMBER-RANGE.
</div>
</center>
</body>
</html>

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

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!

Hey all.

I have a simple validation I need to do. I need to just make sure that a Checkbox is checked, and that a Text field has content. Sounds simple but I cannot find any thing that has a check and a text field.

Here what I have. Can I modify this script to do this? A Checkbox MUST be checked and Text field MUST be filled out. This currently does the text field fine, but no Checkbox obviously.

How can I add a checkbox validation to this?

Thats it. Any help is appreciated.

Code:

<script type="text/javascript">

var textFields = ["digsig"]; 

function validateForm( )
{
    var oops = ""; // must initialize this!
    var form = document.sig;

        for ( var t = 0; t < textFields.length; ++t )
        {
              var field = form[textFields[t]];
              var value = field.value.replace(/^\s+/,"").replace(/\s+$/,""); // trim the input
              if ( value.length < 1 ) 
              {
                    oops += "You MUST enter your Digital Signature";
              }
        }
        if ( oops != "" )
        {
            alert("ERROR:" + oops);
            return false;
        }
    }


}

</script>

Hello 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!

In my project i have a from which have several fields. The form is
<form name="reg" action="payment.jsp" method="post">
-----------
<tr> <td>First name:</td> <td><input type="text" name="firstname"/></td></tr>
--------------------------
<input type="submit" value="Next" onclick="fun()" />
------------
</form>
Then to validate the fields i have used JavaScript.They are validating rightly using a alert box. But when i am pressing ok of the alert box the control is passing to the page i have written in action of the form.I want when i will press ok it should come back to the same page.Only if all fields are then it should go to the page refereed in action. Can anyone help me?
The JavaScript code is
<script type="text/javascript">
function fun()
{
var x=document.forms["reg"]["firstname"].value;

if (x==null || x=="")
{
alert("First name must be filled out");


}