[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 524
  • Last Modified:

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
0
kiirowei
Asked:
kiirowei
  • 5
  • 5
1 Solution
 
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now