Search code examples
javascripthtmljquery-ui-datepicker

JS class not applying on datapicker


Good morning,

I've got some javascript to check if inputs are empty before printing and if so, cancel the print.

I have added jquery datepicker to one of the fields as a class and now it only applies one class or the other. (I have tried the datepicker as an ID instead) but doesn't work.

Javascript:

function checkForm(thisForm) {
var len = thisForm.elements.length ;
var cnt = 0 ;
for ( var i=0; i < len; i++) {
   var elem = thisForm.elements[i] ;
   if (elem.className == "formFieldRequired") {
      if ((elem.value == "" || elem.value == -1)) {
                     alert("WARNING:\n You must supply information for the " + elem.name + " field");
                                elem.focus();
                                return false;
                  }
   }
}
window.print();return true;
}

Input:

<input name="Effective Date" type="text" style="width:12%;" class="formFieldRequired datepicker" placeholder="DD/MM/YYYY" onkeyup="javascript:return mask(this.value,this,'2,5','/');" maxlength="10">

Any ideas on why this is happening and any fixes? - I may be missing something completely obvious!


Solution

  • <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/jquery.datetimepicker.js"></script>
    
    <form id="myform">
    <input name="Effective Date" type="text" style="width:12%;" class="formFieldRequired datepicker" placeholder="DD/MM/YYYY" onkeyup="javascript:return mask(this.value,this,'2,5','/');" maxlength="10">
    </form>
    
    <script>
        function checkForm(thisForm) {
            var len = thisForm.elements.length;
            var cnt = 0 ;
            for ( var i=0; i < len; i++) {
                var elem = thisForm.elements[i] ;
                console.log(elem.className)
                if (elem.className.indexOf("formFieldRequired") != -1)  {
                    if ((elem.value == "" || elem.value == -1)) {
                        alert("WARNING:\n You must supply information for the " + elem.name + " field");
                        elem.focus();
                        return false;
                    }
                }
            }
            window.print();return true;
        }           
    
        checkForm(document.getElementById("myform"));
    </script>