Javascript Date and Quantity Validation

Hello experts, I need to add a date and quantity validation on my html.
After customer input date, quantity and click submit, it will validation the input.
The validation should save in validation.js file.

Please show me the javascript file and the HTML code.

Thank you
kiiroweiAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RoonaanCommented:
Hi,

We are glad to help you in any way, but it would be nice if you helped along a little.

I can easily write you a validation in dutch date format, but that is probably not what your are looking for.

So, having that said, what format should the date be in and which requirements do you have for the quantitiy field.

-r-
0
kiiroweiAuthor Commented:
hello Roonaan:
customer should type in numbers in quantity field.

Thank you for helping
0
kiiroweiAuthor Commented:
and the date should be in mm/dd/yyyy
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

nabsolCommented:
Hi

<html>
<head>

<title>Untitled Document</title>
<script language="javascript">
var dtCh= "/";
var minYear=1900;
var maxYear=2100;

function isInteger(s){
      var i;
    for (i = 0; i < s.length; i++){  
        // Check that current character is number.
        var c = s.charAt(i);
        alert(c)
        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){
      // February has 29 days in any year evenly divisible by four,
    // EXCEPT for centurial years which are not also divisible by 400.
    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 strMonth=dtStr.substring(0,pos1)
      var strDay=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 : mm/dd/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 dt=document.frmSample.txtDate
       
        var qty=document.frmSample.quantity

      if (isDate(dt.value)==false)
        {
            dt.focus()
            return false
      }
    return true
 }

</script>
</script></head>

<body>
<form name="frmSample" method="post" action="" onSubmit="return ValidateForm()">
                <p>Enter a Date <font color="#CC0000"><b>(mm/dd/yyyy)</b></font>
                  :
                  <input type="text" name="txtDate" maxlength="10" size="15">
                </p>
                 <p>Enter Quantity (integer)
                  :
                  <input type="text" name="quantity" maxlength="10" size="15">
                </p>
                <p>
                  <input type="submit" name="Submit" value="Submit">
                </p>
              </form>
</body>
</html>


By Nab
0
nabsolCommented:
Hi

This is better one:

<html>
<head>

<title>Untitled Document</title>
<script language="javascript">
var dtCh= "/";
var minYear=1900;
var maxYear=2100;

function isInteger(s){
      var i;
    for (i = 0; i < s.length; i++){  
        // Check that 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){
      // February has 29 days in any year evenly divisible by four,
    // EXCEPT for centurial years which are not also divisible by 400.
    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 strMonth=dtStr.substring(0,pos1)
      var strDay=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 : mm/dd/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 dt=document.frmSample.txtDate
       
        var qty=document.frmSample.quantity

      if (isDate(dt.value)==false)
        {
            dt.focus()
            return false
      }
        else if (isInteger(qty.value) == false)
        {
           alert("Enter Integer only")
           qty.focus()
           return false;
        }
        else if (qty.value == "")
        {
           alert("Enter Quantity")
           qty.focus()
           return false;
        }

         
    return true
 }

</script>
</script></head>

<body>
<form name="frmSample" method="post" action="" onSubmit="return ValidateForm()">
                <p>Enter a Date <font color="#CC0000"><b>(mm/dd/yyyy)</b></font>
                  :
                  <input type="text" name="txtDate" maxlength="10" size="15">
                </p>
                 <p>Enter Quantity (integer)
                  :
                  <input type="text" name="quantity" maxlength="10" size="15">
                </p>
                <p>
                  <input type="submit" name="Submit" value="Submit">
                </p>
              </form>
</body>
</html>


By Nab
0
kiiroweiAuthor Commented:
Thank you all for helping me, but I don't want to put the javascript in the same HTML file, is there any way I can save the javascript as .js file? so when customer click submit, it will call the .js file? and how can I link the submit button to the .js file?
0
nabsolCommented:
Hi

Put all of your <script> code into mycode.js and write this:
mycode.js
/////////////////////////////////////////
<script language="javascript">
var dtCh= "/";
var minYear=1900;
var maxYear=2100;

function isInteger(s){
     var i;
    for (i = 0; i < s.length; i++){  
        // Check that 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){
     // February has 29 days in any year evenly divisible by four,
    // EXCEPT for centurial years which are not also divisible by 400.
    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 strMonth=dtStr.substring(0,pos1)
     var strDay=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 : mm/dd/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 dt=document.frmSample.txtDate
       
        var qty=document.frmSample.quantity

     if (isDate(dt.value)==false)
        {
          dt.focus()
          return false
     }
        else if (isInteger(qty.value) == false)
        {
           alert("Enter Integer only")
           qty.focus()
           return false;
        }
        else if (qty.value == "")
        {
           alert("Enter Quantity")
           qty.focus()
           return false;
        }

         
    return true
 }

</script>
////////////////////////////////////








<html>
<head>

<title>Untitled Document</title>
<SCRIPT language=javascript src="mycode.js" type=text/javascript></SCRIPT>
</head>

<body>
<form name="frmSample" method="post" action="" onSubmit="return ValidateForm()">
                <p>Enter a Date <font color="#CC0000"><b>(mm/dd/yyyy)</b></font>
                  :
                  <input type="text" name="txtDate" maxlength="10" size="15">
                </p>
                 <p>Enter Quantity (integer)
                  :
                  <input type="text" name="quantity" maxlength="10" size="15">
                </p>
                <p>
                  <input type="submit" name="Submit" value="Submit">
                </p>
              </form>
</body>
</html>
0
nabsolCommented:
Hi

Sorry only put this part into mycode.js.


var dtCh= "/";
var minYear=1900;
var maxYear=2100;

function isInteger(s){
     var i;
    for (i = 0; i < s.length; i++){  
        // Check that 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){
     // February has 29 days in any year evenly divisible by four,
    // EXCEPT for centurial years which are not also divisible by 400.
    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 strMonth=dtStr.substring(0,pos1)
     var strDay=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 : mm/dd/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 dt=document.frmSample.txtDate
       
        var qty=document.frmSample.quantity

     if (isDate(dt.value)==false)
        {
          dt.focus()
          return false
     }
        else if (isInteger(qty.value) == false)
        {
           alert("Enter Integer only")
           qty.focus()
           return false;
        }
        else if (qty.value == "")
        {
           alert("Enter Quantity")
           qty.focus()
           return false;
        }

         
    return true
 }
//////////////////////////////



<html>
<head>

<title>Untitled Document</title>
<SCRIPT language=javascript src="mycode.js" type=text/javascript></SCRIPT></head>

<body>
<form name="frmSample" method="post" action="" onSubmit="return ValidateForm()">
                <p>Enter a Date <font color="#CC0000"><b>(mm/dd/yyyy)</b></font>
                  :
                  <input type="text" name="txtDate" maxlength="10" size="15">
                </p>
                 <p>Enter Quantity (integer)
                  :
                  <input type="text" name="quantity" maxlength="10" size="15">
                </p>
                <p>
                  <input type="submit" name="Submit" value="Submit">
                </p>
              </form>
</body>
</html>


By Nab
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kiiroweiAuthor Commented:
nabsol, I save the script from <script language="javascript"> to </script> into mycode.js
and <html> to </html> into a html file, but it didn't give me validation. Is there something I missed?

Thank you
0
nabsolCommented:
Hi

No remove <script language="javascript"> and </script>  from js file.

It will work
By Nab
0
kiiroweiAuthor Commented:
Nab, Thank you so much.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.