I am beginning with JavaScript. I just wrote a code for form validation but the checkfields() function is not working. I tried to find the error but couldn't spot it after several attempts. It will be very helpful if someone out there can point out the error.
<html>
<title> Sign-Up </title>
<head>
<style>
body {
background-color: lightblue;
}
input {
height: 30px;
widht: 100px;
}
</style>
<script>
function valform() {
var x = document.forms["f2"]["fn"].value;
var y = document.forms["f2"]["ln"].value;
var z = document.forms["f2"]["eid"].value;
var a = document.forms["f2"]["pass"].value;
var b = document.forms["f2"]["cpass"].value;
if (x == "" || y == "" || z == "" || a == "" || b == "") {
alert("Please fill the form completely");
}
}
function checkfields() {
var p1 = document.forms["f2"]["pass"].value;
var p2 = document.forms["f2"]["cpass"].value;
if (p1 != p2) {
document.getElementByID("message").innerHTML = "Password Doesn't match";
return false;
}
}
</script>
</head>
<body>
<center>
<h1> Sign-Up </h1>
<form name="f2" onsubmit="return checkfields()">
First-Name: <input type="text" name="fn"> Last-Name :<input type="text" name="ln"><br><br><br> Email-Id:
<input type="text" name="eid"><br><br><br> Password:
<input type="password" name="pass"><br><br><br> Confirm-Password
<input type="password" name="cpass">
<span id='message'></span>
<br><br><br>
<input type="Submit" onclick="valform()" value="Submit">
</form>
</center>
</body>
</html>
Two things, you need to prevent the default submit event...
<form name="f2" id="myForm" onsubmit="event.preventDefault(); checkfields()">
Note.. I also gave your form an ID which will be needed for the next step...
I also removed the onclick from the submit button...
<input type="Submit"value="Submit">
I modified your method to return a boolean depending on the validation result
function valform() {
var x = document.forms["f2"]["fn"].value;
var y = document.forms["f2"]["ln"].value;
var z = document.forms["f2"]["eid"].value;
var a = document.forms["f2"]["pass"].value;
var b = document.forms["f2"]["cpass"].value;
if (x == "" || y == "" || z == "" || a == "" || b == "") {
alert("Please fill the form completely");
return false;
}
return true;
}
and I call it within checkfields method where upon being success I submit the form using the ID we assigned above...
function checkfields() {
var p1 = document.forms["f2"]["pass"].value;
var p2 = document.forms["f2"]["cpass"].value;
if (p1 != p2) {
document.getElementById("message").innerHTML = "Password Doesn't match";
return false;
}
if(valform()){
document.getElementById("myForm").submit();
}
}
Here's a little JSFiddle demonstrating the above.
Note: you had one error getElementByID should be lower case d (getElementById)
There is a js error, getElementByID should be getElementById
Also I have modified how the validations goes below
You don't need the click handler on the submit, the return is enough on the onsubmit.
Onsubmit calls valform, and all validation is done within. Since you have a checkfields function already, you can simply call it in the validation function.
You also need to return false if the form is incomplete or else it's going to submit anyway. You could make the code a bit cleaner as well by caching document.forms["f2"] into a variable
You also had a typo in the css widht: 100px;
// saving form into a variable to make it a bit cleaner below
var form_f2 = document.forms["f2"];
function checkfields() {
var p1 = form_f2["pass"].value;
var p2 = form_f2["cpass"].value;
if (p1 != p2) {
document.getElementById("message").innerHTML = "Password Doesn't match";
return false;
}
}
function valform() {
var x = form_f2["fn"].value;
var y = form_f2["ln"].value;
var z = form_f2["eid"].value;
var a = form_f2["pass"].value;
var b = form_f2["cpass"].value;
// call to check passwords
checkfields();
if (x == "" || y == "" || z == "" || a == "" || b == "") {
alert("Please fill the form completely");
// need to return false due to incomplete form
return false;
}
}
body {
background-color: lightblue;
}
input {
height: 30px;
width: 100px;
}
<center>
<h1> Sign-Up </h1>
<form name="f2" onsubmit="return valform()">
First-Name: <input type="text" name="fn"> Last-Name :<input type="text" name="ln"><br><br><br> Email-Id:
<input type="text" name="eid"><br><br><br> Password:
<input type="password" name="pass"><br><br><br> Confirm-Password
<input type="password" name="cpass">
<span id='message'></span>
<br><br><br>
<input type="Submit" value="Submit">
</form>
</center>
You could actually combine the checkfields function content into valform. I don't see any need for the extra function in the given code
In your valform() function you need to pass in the event object to prevent submission of the form is validation does not pass with event.preventDefault(). Also, document.getElementByID should be document.getElementById.
<html>
<title> Sign-Up </title>
<head>
<style>
body {
background-color: lightblue;
}
input {
height: 30px;
widht: 100px;
}
</style>
<script>
function valform(e) {
var x = document.forms["f2"]["fn"].value;
var y = document.forms["f2"]["ln"].value;
var z = document.forms["f2"]["eid"].value;
var a = document.forms["f2"]["pass"].value;
var b = document.forms["f2"]["cpass"].value;
if (x == "" || y == "" || z == "" || a == "" || b == "") {
alert("Please fill the form completely");
e.preventDefault();
}
}
function checkfields() {
var p1 = document.forms["f2"]["pass"].value;
var p2 = document.forms["f2"]["cpass"].value;
if (p1 != p2) {
document.getElementById("message").innerHTML = "Password Doesn't match";
return false;
}
return true;
}
</script>
</head>
<body>
<center>
<h1> Sign-Up </h1>
<form name="f2" onsubmit="return checkfields()">
First-Name: <input type="text" name="fn"> Last-Name :<input type="text" name="ln"><br><br><br> Email-Id:
<input type="text" name="eid"><br><br><br> Password:
<input type="password" name="pass"><br><br><br> Confirm-Password
<input type="password" name="cpass">
<span id='message'></span>
<br><br><br>
<input type="Submit" onclick="valform(event)" value="Submit">
</form>
</center>
</body>
</html>
Related
I want to validate my checkboxes to make sure that the user checked at least one, however I keep getting this error:
Uncaught TypeError: Cannot read property 'checked' of undefined.
Here is part of the HTML:
<form name="userSurvey" onsubmit="return validAll()" action="mailto:suvery#worldbook.com" method="post">
Name (Required): <input type="text" name="userName" id="userName" required=""><br> E-Mail (Required): <input type="text" name="mail" id="mail" required=""><br> Phone (Required): <input type="text" name="phone" id="phone" required="" onchange="validNumber()"><br>
<br>
<p>Please choose your favourite types of books.(check all that apply)</p>
<input type="checkbox" name="books" value="Science Fiction">Science Fiction
<input type="checkbox" name="books" value="Travel Guide">Travel Guide
<input type="checkbox" name="books" value="Short Story Collection">Short Story Collection
<input type="checkbox" name="books" value="Other">Other <br>
<textarea></textarea><br>
<input type="submit" name="submit">
<input type="reset" name="reset">
</form>
and part of the JavaScript for the checkboxes:
function validChoice()
{
var bookChoice = document.userSurvey.books.value;
var x= "";
for (i=0;i< 4;i++)
{
if (document.userSurvey['bookChoice'+i].checked)
{
bookChoice = document.userSurvey['bookChoice'+i].value;
x = x +"\n"+ bookChoice;
}
}
if (bookChoice == "")
{
window.alert("You must select at least one book category.");
return false;
}
else
{
var userName = document.userSurvey.userName.value;
var eMail = document.userSurvey.email.value;
var phoneNo = document.userSurvey.phone.value;
return true;
}
}
I am currently learning in JavaScript therefore I would prefer help in JavaScript only.
Full Code on JSFiddle:
https://jsfiddle.net/7qh5segc/
You missed some tag names and missspell them in js function:
<h1>User Survey</h1>
<h2><strong>User Information</strong></h2>
<p>Please enter your details below</p>
<br>
<form name="userSurvey" onsubmit="return validAll()" action="mailto:suvery#worldbook.com" method="post">
Name (Required):
<input type="text" name="userName" id="userName" required="">
<br> E-Mail (Required):
<input type="text" name="email" id="email" required="">
<br> Phone (Required):
<input type="text" name="phone" id="phone" required="" onchange="validNumber()">
<br>
<br>
<p>Please choose your favourite types of books.(check all that apply)</p>
<input type="checkbox" name="books" value="Science Fiction">Science Fiction
<input type="checkbox" name="books" value="Travel Guide">Travel Guide
<input type="checkbox" name="books" value="Short Story Collection">Short Story Collection
<input type="checkbox" name="books" value="Other">Other
<br>
<textarea></textarea>
<br>
<input type="submit" name="submit">
<input type="reset" name="reset">
</form>
and js code goes like this:
function validName() {
var name = document.userSurvey.userName.value;
if (!/^[a-zA-Z]*$/g.test(name)) {
alert("Please enter letters a - z only");
document.userSurvey.userName.focus();
return false;
} else {
return true;
}
}
function validNumber() {
var theNumbersOnly = "";
var theChar = "";
var theInput = document.userSurvey.phone.value;
for (i = 0; i < theInput.length; i++) {
theChar = theInput.substring(i, i + 1);
if (theChar >= "0" && theChar <= "9") {
theNumbersOnly = "" + theNumbersOnly + theChar;
}
}
if (theNumbersOnly.length < 10) {
alert("You must enter 10 numbers.");
document.userSurvey.phone.focus();
} else {
var areacode = theNumbersOnly.substring(0, 3);
var exchange = theNumbersOnly.substring(3, 6);
var extension = theNumbersOnly.substring(6, 10);
var newNumber = "(" + areacode + ") ";
newNumber += exchange + "-" + extension;
document.userSurvey.phone.value = newNumber;
return true;
}
}
function validEmail() {
var email = document.userSurvey.email.value;
var atLoc = email.indexOf("#", 1);
var dotLoc = email.indexOf(".", atLoc + 2);
var len = email.length;
if (atLoc > 0 && dotLoc > 0 && len > dotLoc + 2) {
return true;
} else {
alert("Please enter your e-mail address properly.");
return false;
}
}
function validChoice() {
//var bookChoice = document.userSurvey.books.value;
var bookChoice;
var x = "";
for (var i = 0; i < 4; i++) {
if (document.userSurvey.books[i].checked) {
console.log(document.userSurvey);
bookChoice = document.userSurvey.books[i].value;
x = x + "\n" + bookChoice;
}
}
if (bookChoice == "") {
window.alert("You must select at least one book category.");
return false;
} else {
var userName = document.userSurvey.userName.value;
var eMail = document.userSurvey.email.value;
var phoneNo = document.userSurvey.phone.value;
console.log(userName);
console.log(eMail);
console.log(phoneNo);
return true;
}
}
function validAll() {
if ((validName() == true) && (validEmail() == true) && (validNumber() == true) && (validChoice() == true)) {
return true;
} else {
return false;
}
}
You missed email tag name too. regards
You can fix the checkbox issue using the following code. A sensible way to get all the checkboxes in this case is using their shared "name" attribute. There are other ways if your structure was different - e.g. using a CSS class, or adding some other custom attribute to the elements.
function validChoice() {
var bookChoices = "";
var checkboxes = document.getElementsByName("books"); //get all elements named "books" into an array
for (i = 0; i < checkboxes.length; i++) { //loop the array
if (checkboxes[i].checked) { //if the array item at this index is checked, then add it to the list
bookChoices += "\n" + checkboxes[i].value;
}
}
if (bookChoices == "") {
window.alert("You must select at least one book category.");
return false;
} else {
alert(bookChoices); //just for testing
return true;
}
}
See https://jsfiddle.net/7qh5segc/3/ for a demo using the changed validChoice() function.
After clicking "submit", stay on the page.
Input data, like "computer number" and "profit", stay inside those blank square.
A word "Submitted", appear in the center of this page.
The following is my code, Please help, thank you!
<html>
<head>
<title></title>
</head>
<body>
<form name="form"
onsubmit="return validateForm()">
Computer Number:<br>
<input type="text" name="Computer" required><br>
<p>How much is your profit?
<input id="id1" name = "id1" required>
<button type = "button" onclick="myFunction()">My Answer</button>
<button type="button" id="btn1" onclick="Solution()" style="display:none;">Solution</button>
</p>
<p id="Q1"></p>
<script>
var errosCount = 0;
function myFunction() {
var x, text;
x = document.getElementById("id1").value;
if (isNaN(x) || x != 100) {
text = "Incorrect"; document.getElementById("Q1").style.color = "red";errosCount++;
} else {
text = "Correct"; document.getElementById("Q1").style.color = "green";
}
document.getElementById("Q1").innerHTML = text;
if(errosCount === 3){
errosCount = 0;
document.getElementById('btn1').style.display = 'block';
document.getElementById("Q1").innerHTML = '';
} else {
document.getElementById('btn1').style.display = 'none';
}
}
function Solution(){
text = "(P - w) * q<sub>o</sub> - I = (53 - 43) * 30 - 200 = 100"; document.getElementById("Q1").style.color = "red";
document.getElementById("Q1").innerHTML = text;
}
</script>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
var q = document.forms["my form"]["Computer"].value;
if (q == "") {
alert("Computer Number is Missing!");
return false;}
var w = document.forms["my form"]["id1"].value;
if (w != "100") {
alert("Question 1 is Incorrect!");
return false;}
}
</script>
</body>
</html>
Firstly, you were having document.forms["my form"] which was invalid since your form name was form so I changed it to document.forms["form"].
And, on submit, I added return false at the bottom of the function to stay on the page. Also, before that, added "Submitted" text in the center of the page as shown below.
Here's working code snippet!
Hope that helps!
var errosCount = 0;
function myFunction() {
var x, text;
x = document.getElementById("id1").value;
if (isNaN(x) || x != 100) {
text = "Incorrect";
document.getElementById("Q1").style.color = "red";
errosCount++;
} else {
text = "Correct";
document.getElementById("Q1").style.color = "green";
}
document.getElementById("Q1").innerHTML = text;
if (errosCount === 3) {
errosCount = 0;
document.getElementById('btn1').style.display = 'block';
document.getElementById("Q1").innerHTML = '';
} else {
document.getElementById('btn1').style.display = 'none';
}
}
function Solution() {
text = "(P - w) * q<sub>o</sub> - I = (53 - 43) * 30 - 200 = 100";
document.getElementById("Q1").style.color = "red";
document.getElementById("Q1").innerHTML = text;
}
function validateForm() {
var q = document.forms["form"]["Computer"].value;
if (q == "") {
alert("Computer Number is Missing!");
return false;
}
var w = document.forms["form"]["id1"].value;
if (w != "100") {
alert("Question 1 is Incorrect!");
return false;
}
document.getElementById("submitted").innerHTML = "Submitted"
return false;
}
#submitted {
text-align: center
}
<form name="form" onsubmit="return validateForm()">
Computer Number:<br>
<input type="text" name="Computer"><br>
<p>How much is your profit?
<input id="id1" name="id1" required>
<button type="button" onclick="myFunction()">My Answer</button>
<button type="button" id="btn1" onclick="Solution()" style="display:none;">Solution</button>
</p>
<p id="Q1"></p>
<input type="submit" value="Submit">
</form>
<br/>
<div id="submitted">
</div>
Hello you should think abut using AJAX as you are sending a form.
This can be the button:
<button type="button"
onclick="validateForm('ajax_info.php', myFunction)"> Clic to Submit
</button>
And this the AJAX function:
function validateForm(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true); //can be POST
xhttp.send();
}
function myFunction(xhttp) {
document.getElementById("submited").innerHTML =
xhttp.responseText;
}
I have the code below. I want my max character input to be 10 and min to be 2. But I tried and my textbox still changed to red when my minimum character entered was 2 or even less than 10 characters. I can't HTML maxlength or minlength here.
This condition if (fname.value.match(/\S/)) checks if the textbox is not empty when it should check for whitespaces. I tried to use != "", but when I enter something it gets skipped when I debug this.
function validation() {
var fname = "";
var add = "";
var message = "";
// retrieving ids
fname = document.getElementById('fname');
add = document.getElementById('add');
// white to red
if (fname.value.match(/\S/)) {
fname.style.backgroundColor = "white";
}
if ((fname != '') || (fname.value >= 10 || fname.value <= 2)) {
fname.style.backgroundColor = "red";
}
// white to red
if (add.value.match(/\S/)) {
add.style.backgroundColor = "white";
}
if ((add != '') || (add.value >= 10 || add.value <= 2)) {
add.style.backgroundColor = "red";
}
if (fname.value == "") {
alert("Firstname is empty! Enter your firstname to resume");
return false;
}
if (add.value == "") {
alert("Address is empty! Enter your address to resume");
return false;
}
}
<form onsubmit="return validation()">
Firstname:<br>
<input type="text" name="fname" id="fname">
<br> Address:
<br>
<input type="text" name="add" id="add">
<br><br>
<input type="submit" onClick="validation(); return false;" value="Submit">
</form>
You should check if the value's length is between 2 and 10, not the value itself. Like this:
function validation() {
var fname = document.getElementById('fname');
var add = document.getElementById('add');
if (2 <= fname.value.length && fname.value.length <= 10) { // if there is input between 2 and 10 characters, then set the background to white
fname.style.backgroundColor = "white";
}else { // otherwise, ...
fname.style.backgroundColor = "red";
alert("name is not valid!");
return false;
}
if (2 <= add.value.length && add.value.length <= 10) { // if there is input between 2 and 10 characters, then set the background to white
add.style.backgroundColor = "white";
}
else { // otherwise, ...
add.style.backgroundColor = "red";
alert("addres is not valid!");
return false;
}
return true;
}
<form onsubmit="return validation()">
Firstname:<br>
<input type="text" name="fname" id="fname">
<br> Address:
<br>
<input type="text" name="add" id="add">
<br><br>
<input type="submit" onClick="validation(); return false;" value="Submit">
</form>
For some reason, the validation for duration is having problem such as when I try to type 30000000 for the duration and submit,it just never do its validation but the rest of the validation works for some reason.
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["token","id","percentage","duration"].value;
if (x == "") {
alert("There are empty fields");
return false;
}
var y =document.forms.myForm.percentage.value;
if(y>=0 && y<=100)
{
return true;
}
else
{
alert("Percentage output must be between 0 and 100");
return false;
}
var k =document.forms.myForm.duration.value;
if(k>=0 && k<=30000)
{
return true;
}
else{
alert("Error");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" onSubmit="return validateForm();">
Enter access token: <input type="text" name="token">
Enter device id: <input type="text" name="id">
Enter output percentage: <input type="text" name="percentage">
Enter duration(in milliseconds) of output: <input type="text" name="duration">
<input type="submit" value="Submit">
</form>
</body>
</html>
Cause:
function validateForm() {
var x = document.forms["myForm"]["token","id","percentage","duration"].value;
if (x == "") {
alert("There are empty fields");
return false;
}
var y =document.forms.myForm.percentage.value;
if(y>=0 && y<=100)
{
return true; //<---- You leave your code here!!
}
else
{
alert("Percentage output must be between 0 and 100");
return false;
}
var k =document.forms.myForm.duration.value;
if(k>=0 && k<=30000)
{
return true;
}
else{
alert("Error");
return false;
}
}
Look at the arrow in the code I entered.
In the percentage check, you always return! The duration check is never reached. You should remove all your if/else cases which ends in return true, only check on error and return false in that case. Otherwise return true as the last line of your method.
If you want to alert on more than one error, you can do something like the following, though you'd have to format the alert message text so that each error is on its own line:
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var errors = [];
var x = document.forms["myForm"]["token","id","percentage","duration"].value;
if (x == "") {
alert("There are empty fields");
return false;
}
var percentage = document.forms.myForm.percentage.value;
if(!(percentage >= 0 && percentage <= 100)) {
errors.push("Percentage output must be between 0 and 100");
}
var duration = document.forms.myForm.duration.value;
if(!(duration >= 0 && duration <= 30000)) {
errors.push("Duration output must be between 0 and 30,000");
}
if (errors.length > 0) {
alert(errors);
}
}
</script>
</head>
<body>
<form name="myForm" onSubmit="return validateForm();">
<p>Enter access token: <input type="text" name="token"/></p>
<p>Enter device id: <input type="text" name="id"/></p>
<p>Enter output percentage: <input type="text" name="percentage"/></p>
<p>Enter duration(in milliseconds) of output: <input type="text" name="duration"/></p>
<p><input type="submit" value="Submit"/></p>
</form>
</body>
</html>
I am having a ini.jsp page for creating a form for adding two text fields to input date and then using javascript in the ini.jsp page itself to validate those dates. I now have some library files(calendar.js, calendar-en.js, calendar-setup.js, calendar_1.png, calendar_system.css).
Now my question is how to I link these files to javascript (I am using ECLIPSE IDE) so that it displays calendar beside the textboxes for date in the format dd/mm/yyyy. . .
I have gone through lots of stuff, tried doing those but really couldn't get the expected output.
Below is the code that i have implemented so far
<html lang="en">
<head>
<style type="text/css" src="../datePickers/calendar-system.css">
</style>
</head>
<body>
<script language="Javascript" src="../Scripts/calendar.js"></script>
<h1>Report Generation</h1>
<div style="margin: 0 auto; width: 100%; text-align: left">
<form name="date" action="<c:url value="cli.htm"/>"
method="post" onSubmit="return ValidateForm()">
<fieldset>
<legend>Please enter Start Date and End Date</legend>
<div style="text-align: center; margin: 150px auto 100px auto;">
<label for="dateFrom">Start Date:</label>
<font color="#CC0000"><b>(dd/mm /yyyy)</b></font>
<input type="text" name="dateFrom" maxlength="25" size="25"
id="dateFrom" />
<img src = "../Images/calendar_1.png" onclick="javascript:Calendar.setup(inputField,ifFormat,button) style="cursor: pointer" />
</div>
<div style="text-align: center; margin: 150px auto 100px auto;">
<label for="dateTo">End Date:</label>
<font color="#CC0000"><b>(dd/mm/yyyy)</b></font>
<input type="text" name="dateTo" maxlength="25" size="25"
id="dateTo" />
</div>
<div>
<input type="submit" value="Generate Report" align="center" />
</div>
</form>
</div>
<script language="Javascript" >
var dtCh= "/";
var minYear=1900;
var maxYear=2500;
function isInteger(s){
var i;
for (i = 0; i < s.length; i++){
// Checking that the current character is number.
var c = s.charAt(i);
if (((c < "0") || (c > "9")))
return false;
}
// All characters are numbers.
return true;
}
function stripCharsInBag(s, bag){
var i;
var returnString = "";
// Search through string's characters one by one.
// If character is not in bag, append to returnString.
for (i = 0; i < s.length; i++){
var c = s.charAt(i);
if (bag.indexOf(c) == -1) returnString += c;
}
return returnString;
}
function daysInFebruary (year){
return (((year % 4 == 0) && ( (!(year % 100 == 0)) || (year % 400 == 0))) ? 29 : 28 );
}
function DaysArray(n) {
for (var i = 1; i <= n; i++) {
this[i] = 31
if (i==4 || i==6 || i==9 || i==11) {this[i] = 30}
if (i==2) {this[i] = 29}
}
return this
}
function isDate(dtStr){
var daysInMonth = DaysArray(12)
var pos1=dtStr.indexOf(dtCh)
var pos2=dtStr.indexOf(dtCh,pos1+1)
var strDay=dtStr.substring(0,pos1)
var strMonth=dtStr.substring(pos1+1,pos2)
var strYear=dtStr.substring(pos2+1)
strYr = strYear
if (strDay.charAt(0)=="0" && strDay.length>1) strDay=strDay.substring(1)
if (strMonth.charAt(0)=="0" && strMonth.length>1) strMonth=strMonth.substring(1)
for (var i = 1; i <= 3; i++) {
if (strYr.charAt(0)=="0" && strYr.length>1) strYr=strYr.substring(1)
}
month=parseInt(strMonth)
day=parseInt(strDay)
year=parseInt(strYr)
if (pos1==-1 || pos2==-1){
alert("The date format should be : dd/mm/yyyy");
return false;
}
if (strMonth.length<1 || month<1 || month>12){
alert("Please enter a valid month");
return false;
}
if (strDay.length<1 || day<1 || day>31 || (month==2 && day>daysInFebruary(year)) || day > daysInMonth[month]){
alert("Please enter a valid day");
return false;
}
if (strYear.length != 4 || year==0 || year<minYear || year>maxYear){
alert("Please enter a valid 4 digit year between "+minYear+" and "+maxYear);
return false;
}
if (dtStr.indexOf(dtCh,pos2+1)!=-1 || isInteger(stripCharsInBag(dtStr, dtCh))== false){
alert("Please enter a valid date");
return false;
}
return true;
}
function ValidateForm(){
var dt1=document.date.dateFrom
var dt2=document.date.dateTo
if (!isDate(dt1.value)){
dt1.value='';
dt1.focus();
return false;
}
if(!isDate(dt2.value)){
dt2.value='';
dt2.focus();
return false;
}
return true
}
}
</script>
</body>
</html>
I want changes in code to be done as:
The code should initialises the calendar object and links an image to a text field (using their IDs) to respond to a click.
Calendar.setup(
{
inputField : "dateFrom", // ID of the input field
ifFormat : "%d/%m/%Y", // the date format
button : "imgCal" // ID of the calendar image
}
);
should I really need to create a calendar object if so, can I know where. Also, where should I place the Calendar.setup code in my jsp page?
Can someone please help me sort out this issue...
Quick suggestion: Have you tried looking into this page.
Easy to implement and you can see the demo as well.
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
**
Now, Looking into your code; can you please flick the calender.setup(foo1, foo2...) function implementation? (Is this your customized library?)
Thanks,
i am trying to validate date with **YYYY\MM\DD of format using HTML and Javascript
Hope its Help you...
try to yourself...
< script type = "text/javascript" >
function valdate() {
var regdate = /^(19[0-9][0-9]|20[0-9][0-9])\/(0[1-9]|1[012])\/(0[1-9]|[12][0-9]|3[01])$/;
if (form1.txtdate.value.match(regdate)) {
return true;
} else {
alert("! please Enter the Date in this Format 'YYYY/MM/DD'");
form1.txtdate.value = "";
form1.txtdate.focus();
return false;
}
} < /script>
<from="form1" method="post" action="">
<input name="txtdate" type="text" onblur="valdate()" maxlength="10" required />
</form>
if helpful so make voting....