combine javascript and jquery

i am trying to combine jquery and javascript alert together, getting an error, pl take a look.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script>
$(document).ready(function(){
	  $("#aForm").validate({

				$("#DOB").rules("add", {
                    required: true,
                    date: true,
                    messages: {
                        required: "Date of Birth is required",
                        date: "Date format is incorrect"
                    }
                });
		;
});
/* Date validateion
   Copyright (c) 2003-2010 Michel Plungjan "javascripts(a)plungjan.name" */
function dateVal(aForm) {
  alert('date val working');
  var dateString = aForm.DOB.value;
  if (!dateString || dateString.indexOf('/')==-1) {
    alert('Please enter a valid date on the format mm/dd/yyyy')
    return false
  }

  var date = new Date(dateString);
  var testDate = dateString.split('/');
  var mm = parseInt(testDate[0],10);
  var dd = parseInt(testDate[1],10);
  var yyyy=parseInt(testDate[2],10); // assuming 4 digits
  if (
  date.getMonth()   !=(mm-1) || 
  date.getDate()    !=dd ||
  date.getFullYear()!= yyyy
  ) 
  { 
  	 alert('wrong date');
     return false
  }

  return true
}  
</script> 
</head>
<body>
<form id="aForm" method="get" action="">
	<table width="800" cellpadding="2" cellspacing="0">  
			<tr>
				<td class="label">
					Date
				</td>
				<td>
					<input type="text" id="DOB" size="15" />
				</td>
			</tr>
			
			<tr>
				<td>
				</td>
				<td>
					<input class="submit" type="submit" value="Submit"/> 
				</td>
			</tr> 
	</table>    
</form>
</body>
</html>

Open in new window

yingwhoAsked:
Who is Participating?
 
ZylochConnect With a Mentor Commented:
Try the attached code. If you have any questions as to how it works, feel free to ask. It should also demonstrate why your syntax before was wrong; you shouldn't be wrapping everything inside validate().

$(document).ready(function(){
   $("#aForm").validate({
       submitHandler: function(frm) {
          return dateVal(frm);
       }  
   });
   $("#DOB").rules("add", {
      required: true,
      date: true,
      messages: {
         required: "Date of Birth is required",
         date: "Date format is incorrect"
      }
   });
});

Open in new window

0
 
ZylochCommented:
The jQuery portion of the code should be as below. You are also currently not using the dateVal() function, and indeed it seems redundant if you are going to be using the jQuery validation plugin.

$(document).ready(function(){
   $("#aForm").validate();
   $("#DOB").rules("add", {
      required: true,
      date: true,
      messages: {
         required: "Date of Birth is required",
         date: "Date format is incorrect"
      }
   });
});

Open in new window

0
 
yingwhoAuthor Commented:
hi zyl, i need to use both as jquery cannot validate the date format. after jquery does the validation reg js should do the validation for proper format.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
ZylochCommented:
Check the documentation for the validation plugin at http://docs.jquery.com/Plugins/Validation/validate#toptions.

One option you can use is to attach a callback to submitHandler.
0
 
yingwhoAuthor Commented:
tried .. pl check whats the syntax issue.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<script>
$(document).ready(function(){
   $("#aForm").validate({

   $("#DOB").rules("add", {
      required: true,
      date: true,
      messages: {
         required: "Date of Birth is required",
         date: "Date format is incorrect",
		 submitHandler: dateVal;
      }
   });
});
});
/* Date validateion
   Copyright (c) 2003-2010 Michel Plungjan "javascripts(a)plungjan.name" */
function dateVal() {
  alert('date val working');
  var dateString = aForm.DOB.value;
  if (!dateString || dateString.indexOf('/')==-1) {
    alert('Please enter a valid date on the format mm/dd/yyyy')
    return false
  }

  var date = new Date(dateString);
  var testDate = dateString.split('/');
  var mm = parseInt(testDate[0],10);
  var dd = parseInt(testDate[1],10);
  var yyyy=parseInt(testDate[2],10); // assuming 4 digits
  if (
  date.getMonth()   !=(mm-1) || 
  date.getDate()    !=dd ||
  date.getFullYear()!= yyyy
  ) 
  { 
  	 alert('wrong date');
     return false
  }

  return true
}  
</script> 
</head>
<body>
<form id="aForm" method="get" action="">
	<table width="800" cellpadding="2" cellspacing="0">  
			<tr>
				<td class="label">
					Date
				</td>
				<td>
					<input type="text" id="DOB" size="15" />
				</td>
			</tr>
			
			<tr>
				<td>
				</td>
				<td>
					<input class="submit" type="submit" value="Submit"/> 
				</td>
			</tr> 
	</table>    
</form>
</body>
</html>

Open in new window

0
 
yingwhoAuthor Commented:
thanks
0
All Courses

From novice to tech pro — start learning today.