arpeggio068/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  </head>
  <body>
  <div class="container">
    <form id="form1" novalidate>
      <div class="row my-2">
      <div class="col">
        <label>date1</label>
        <input name="equip_date1" id="equip_date1" type="text" class="form-control chk_date"
        pattern="(0[1-9]|1\d|2[0-9])/(0[1-9]|1[0-2])/(?:19|20)[0-9]{2}|29/(0[13-9]|1[0-2])/(?:19|20)(?:0[48]|[2468][048]|[13579][26])|30/(0[13-9]|1[0-2])/(?:19|20)[0-9]{2}|31/(0[13578]|1[02])/(?:19|20)[0-9]{2}"
        placeholder="DD/MM/YYYY" onchange="return validateDateLeapYear()" required>
        <div class = "invalid-feedback">incorrect date format</div>
      </div>
      <div class="col">
        <label>date2</label>
        <input name="equip_date2" id="equip_date2" type="text" class="form-control chk_date"
        pattern="(0[1-9]|1\d|2[0-9])/(0[1-9]|1[0-2])/(?:19|20)[0-9]{2}|29/(0[13-9]|1[0-2])/(?:19|20)(?:0[48]|[2468][048]|[13579][26])|30/(0[13-9]|1[0-2])/(?:19|20)[0-9]{2}|31/(0[13578]|1[02])/(?:19|20)[0-9]{2}"
        placeholder="DD/MM/YYYY" onchange="return validateDateLeapYear()" required>
        <div class = "invalid-feedback">incorrect date format</div>
      </div>
      <div class="col">
        <label>date3</label>
        <input name="equip_date3" id="equip_date3" type="text" class="form-control chk_date"
        pattern="(0[1-9]|1\d|2[0-9])/(0[1-9]|1[0-2])/(?:19|20)[0-9]{2}|29/(0[13-9]|1[0-2])/(?:19|20)(?:0[48]|[2468][048]|[13579][26])|30/(0[13-9]|1[0-2])/(?:19|20)[0-9]{2}|31/(0[13578]|1[02])/(?:19|20)[0-9]{2}"
        placeholder="DD/MM/YYYY" onchange="return validateDateLeapYear()" required>
        <div class = "invalid-feedback">incorrect date format</div>
      </div>
     </div>
     <button class="btn btn-primary" type="submit" onclick="validate()">test</button>
    </form>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
  </body>
  <script>
    function populateDates3(){
      const currentDate = new Date();
      $(function(){
         $('.chk_date').datepicker({
          //minDate: -365,
          maxDate: currentDate,
          dateFormat: "dd/mm/yy",
          dayNamesMin: ["อา", "จ", "อ", "พ", "พฤ", "ศ", "ส"],
          monthNames: ["มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน", "กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน",
          "ธันวาคม"],

        });
      });

    }

    function preventFormSubmit(){
        const forms = document.querySelectorAll('form');
        for (let i = 0; i < forms.length; i++) {
            forms[i].addEventListener('submit', function(event) {
                event.preventDefault();
            });
        }
    }

    function validate(){
      const forms = document.querySelectorAll("#form1")
      Array.prototype.slice.call(forms).forEach(function (form) {
        form.addEventListener('submit', function (event) {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }

          form.classList.add('was-validated')
        }, false)
      })

      return Array.prototype.every.call(forms,function(form){
          return form.checkValidity();
      });
    }

    function checkLeapYears(input){
      year = parseInt(input);
      if(year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)){
        return true;
      }else{
            return false;
          }
    }

    function validateDateLeapYear(){
      const inputDate = document.querySelectorAll(".chk_date")
      Array.prototype.slice.call(inputDate).forEach(function (el) {
        let year = el.value.split('/')[2]
        let month = el.value.split('/')[1]
        let date = el.value.split('/')[0]
        if(checkLeapYears(year) === false && Number(month) == 2 && Number(date) > 28 ){
          el.setCustomValidity("Invalid date! Not a leap year and date value exceeds 28.");
          return false;
        }
        else {
          el.setCustomValidity("");
        }
        return el.checkValidity();
      })

    }

    document.addEventListener("DOMContentLoaded",function(){
      preventFormSubmit()
      populateDates3()
    });
  </script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<base target="_top">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
	<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
	</head>
	<body>
	<div class="container">
	<form id="form1" novalidate>
	<div class="row my-2">
	<div class="col">
	<label>date1</label>
	<input name="equip_date1" id="equip_date1" type="text" class="form-control chk_date"
	pattern="(0[1-9]\|1\d\|2[0-9])/(0[1-9]\|1[0-2])/(?:19\|20)[0-9]{2}\|29/(0[13-9]\|1[0-2])/(?:19\|20)(?:0[48]\|[2468][048]\|[13579][26])\|30/(0[13-9]\|1[0-2])/(?:19\|20)[0-9]{2}\|31/(0[13578]\|1[02])/(?:19\|20)[0-9]{2}"
	placeholder="DD/MM/YYYY" onchange="return validateDateLeapYear()" required>
	<div class = "invalid-feedback">incorrect date format</div>
	</div>
	<div class="col">
	<label>date2</label>
	<input name="equip_date2" id="equip_date2" type="text" class="form-control chk_date"
	pattern="(0[1-9]\|1\d\|2[0-9])/(0[1-9]\|1[0-2])/(?:19\|20)[0-9]{2}\|29/(0[13-9]\|1[0-2])/(?:19\|20)(?:0[48]\|[2468][048]\|[13579][26])\|30/(0[13-9]\|1[0-2])/(?:19\|20)[0-9]{2}\|31/(0[13578]\|1[02])/(?:19\|20)[0-9]{2}"
	placeholder="DD/MM/YYYY" onchange="return validateDateLeapYear()" required>
	<div class = "invalid-feedback">incorrect date format</div>
	</div>
	<div class="col">
	<label>date3</label>
	<input name="equip_date3" id="equip_date3" type="text" class="form-control chk_date"
	pattern="(0[1-9]\|1\d\|2[0-9])/(0[1-9]\|1[0-2])/(?:19\|20)[0-9]{2}\|29/(0[13-9]\|1[0-2])/(?:19\|20)(?:0[48]\|[2468][048]\|[13579][26])\|30/(0[13-9]\|1[0-2])/(?:19\|20)[0-9]{2}\|31/(0[13578]\|1[02])/(?:19\|20)[0-9]{2}"
	placeholder="DD/MM/YYYY" onchange="return validateDateLeapYear()" required>
	<div class = "invalid-feedback">incorrect date format</div>
	</div>
	</div>
	<button class="btn btn-primary" type="submit" onclick="validate()">test</button>
	</form>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
	<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
	</body>
	<script>
	function populateDates3(){
	const currentDate = new Date();
	$(function(){
	$('.chk_date').datepicker({
	//minDate: -365,
	maxDate: currentDate,
	dateFormat: "dd/mm/yy",
	dayNamesMin: ["อา", "จ", "อ", "พ", "พฤ", "ศ", "ส"],
	monthNames: ["มกราคม", "กุมภาพันธ์", "มีนาคม", "เมษายน", "พฤษภาคม", "มิถุนายน", "กรกฎาคม", "สิงหาคม", "กันยายน", "ตุลาคม", "พฤศจิกายน",
	"ธันวาคม"],

	});
	});

	}

	function preventFormSubmit(){
	const forms = document.querySelectorAll('form');
	for (let i = 0; i < forms.length; i++) {
	forms[i].addEventListener('submit', function(event) {
	event.preventDefault();
	});
	}
	}

	function validate(){
	const forms = document.querySelectorAll("#form1")
	Array.prototype.slice.call(forms).forEach(function (form) {
	form.addEventListener('submit', function (event) {
	if (!form.checkValidity()) {
	event.preventDefault()
	event.stopPropagation()
	}

	form.classList.add('was-validated')
	}, false)
	})

	return Array.prototype.every.call(forms,function(form){
	return form.checkValidity();
	});
	}

	function checkLeapYears(input){
	year = parseInt(input);
	if(year % 400 == 0 \|\| (year % 100 != 0 && year % 4 == 0)){
	return true;
	}else{
	return false;
	}
	}

	function validateDateLeapYear(){
	const inputDate = document.querySelectorAll(".chk_date")
	Array.prototype.slice.call(inputDate).forEach(function (el) {
	let year = el.value.split('/')[2]
	let month = el.value.split('/')[1]
	let date = el.value.split('/')[0]
	if(checkLeapYears(year) === false && Number(month) == 2 && Number(date) > 28 ){
	el.setCustomValidity("Invalid date! Not a leap year and date value exceeds 28.");
	return false;
	}
	else {
	el.setCustomValidity("");
	}
	return el.checkValidity();
	})

	}

	document.addEventListener("DOMContentLoaded",function(){
	preventFormSubmit()
	populateDates3()
	});
	</script>
	</html>
No results found