0

I am new to JavaScript and attempting to validate a simple date of birth input, but it seems the js file is not doing anything. I can input anything and it works, so I am wondering what is wrong with the code.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<script src="test.js"></script>
</head>

<body>
<form id"regForm" method="post" action="formtest.php">

<fieldset>
<p><label for="dob">Date of Birth</label><input type="text" name="dob" id="dob" maxlength="10" size="10" minlength="8" placeholder="DD/MM/YYYY"/></p>
</fieldset>

<input type= "submit" value="Submit"/>
<input type= "reset" value="Reset Form"/>
</form>
</body>

JavaScript

var gErrorMsg = "";

function validateForm() {
"use strict";
var isAllOK = false;
gErrorMsg = "";
var dobOK = isDOBOK();
if (dobOK) {
isAllOK = true;
}
else {
alert(gErrorMsg);
gErrorMsg = "";
isAllOK = false;
}
return isAllOK;
}

function isDOBOK(){
var validDOB = true;
var now = new dob();
var dob = document.getElementById("dob").value;
var dateMsg = "";
var dmy = dob.split("/");
var allNumbers = true;
for (var i = 0; i < dmy.length; i++){
  if(isNaN(dmy[i])){
    dateMsg = dateMsg + "You must enter only numbers into the date" + "\n";
    validDOB = false;
  }
}
if ((dmy[0] <1) || (dmy[0] > 31) {
dateMsg = dateMsg + "Day must be between 1 and 31" + "\n";
validDOB = false;
}
if ((dmy[1] <1) || (dmy[0] > 12) {
dateMsg = dateMsg + "Month must be between 1 and 12" + "\n";
validDOB = false;
}
if ((dmy[2] < now.getFullYear() - 80)) {
dateMsg = dateMsg + "You must be younger than 80" + "\n";
validDOB = false;
}

if (!validDOB){
gErrorMsg = gErrorMsg + dateMsg;
}
return validDOB;
}


function init() {
var regForm = document.getElementById("regForm");
regForm.onsumbit = validateForm;

}

window.onload = init;

Any help would be greatly appreciated. Thanks!

Improve this question
1
  • 1
    s/onsumbit/onsubmit/ Commented Apr 27, 2016 at 10:02

4 Answers 4

Reset to default
1

Try Something Like this

Example 1

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

Example 2

   <input id="id1" type="number" min="100" max="300">
    <button onclick="myFunction()">OK</button>

  <p id="demo"></p>

   <script>
     function myFunction() {
     var inpObj = document.getElementById("id1");
     if (inpObj.checkValidity() == false) {
     document.getElementById("demo").innerHTML = inpObj.validationMessage;
   }
 }
</script>

Example 3

<html>

<head>
<title>Form Validation Example</title>

<script>
function ValidateContactForm()
 {
   var name = document.ContactForm.Name;
var email = document.ContactForm.Email;
var phone = document.ContactForm.Telephone;
var nocall = document.ContactForm.DoNotCall;
var what = document.ContactForm.Subject;
var comment = document.ContactForm.Comment;

if (name.value == "")
{
    window.alert("Please enter your name.");
    name.focus();
    return false;
}

if (email.value == "")
{
    window.alert("Please enter a valid e-mail address.");
    email.focus();
    return false;
}
if (email.value.indexOf("@", 0) < 0)
{
    window.alert("Please enter a valid e-mail address.");
    email.focus();
    return false;
}
  if (email.value.indexOf(".", 0) < 0)
    {
    window.alert("Please enter a valid e-mail address.");
    email.focus();
    return false;
   }

   if ((nocall.checked == false) && (phone.value == ""))
{
    window.alert("Please enter your telephone number.");
    phone.focus();
    return false;
}

if (what.selectedIndex < 1)
{
    alert("Please tell us how we can help you.");
    what.focus();
    return false;
}

if (comment.value == "")
{
    window.alert("Please provide a detailed description or comment.");
    comment.focus();
    return false;
}
return true;
}

function EnableDisable(chkbx)
{
if(chkbx.checked == true)
{
    document.ContactForm.Telephone.disabled = true;
}
else
{
    document.ContactForm.Telephone.disabled = false;
}
 }
  </script>
</head>

 <body>

   <form method="post" action="mailto:[email protected]" 
    name="ContactForm" onsubmit="return ValidateContactForm();">
  <p>Name: <input type="text" size="65" name="Name"></p>
  <p>E-mail Address:  <input type="text" size="65" name="Email"></p>
  <p>Telephone: <input type="text" size="65" name="Telephone"><br>
    <input type="checkbox" name="DoNotCall" 
    onclick="EnableDisable(this);"> Please do not call me.</p>
  <p>What can we help you with?
    <select type="text" value="" name="Subject">
        <option>  </option>
        <option>Customer Service</option>
        <option>Question</option>
        <option>Comment</option>
        <option>Consultation</option>
        <option>Other</option>
    </select></p>
<p>Comments:  <textarea cols="55" name="Comment">  </textarea></p>
<p><input type="submit" value="Send" name="submit">
<input type="reset" value="Reset" name="reset"></p>
 </form>

 </body>
  </html>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

You can test date onsubmit like

function validateForm()
{
  var inputDate = document.getElementById("dob").value;

  //Format dd/mm/yyyy
  var pattern =/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;
  alert(pattern.test(inputDate));
  if(pattern.test(inputDate))
  {
     alert("Validate");
  }
  else 
  {
    alert("Not valid"); 
  }
}
Improve this answer

Comments

0

Wheather in Form you add OnSubmit then call the function of validation or in submit button in onclick you have to call the validation function

Improve this answer

Comments

0
  1. In Html line 8, missing "=" after id
  2. In JS close if, line 32 and line 36
  3. Use browser console for debugging
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.