CODEWITHSUNDEEP
javascripthtmlformsvalidation
user6260650
user6260650

Reputation:

JavaScript Not Validating Input on Form

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!

Upvotes: 0

Views: 163

Answers (4)

Umesh Maharshi
Umesh Maharshi

Reputation: 1591

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

Upvotes: 0

JENKINS J
JENKINS J

Reputation: 153

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

Upvotes: 0

Kirankumar Dafda
Kirankumar Dafda

Reputation: 2384

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"); 
  }
}

Upvotes: 0

Balu B
Balu B

Reputation: 41

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>

Upvotes: 1

Related Questions