field validations

by bilbobaggins

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/matt212/Nodejs_Postgresql_VanillaJS_Fastify@master/app/public/admin/js/app/fieldValidations-cdn-updated.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/css/bootstrap.rtl.min.css">
<div class="box-body" id="overlaycontent">
  <div class="form-group overlaytxtalign col-md-5 is-empty">
    <div class="col-sm-15"><label class="lblhide" id="lblmsgfirst_name"><i class="fa fa-bell-o"></i> Input with warning</label><input type="string" data-key-type="first_name" data-attribute="string" class="form-control" maxlength="45" data-form-type="false" onkeyup="javascript:reqopsValidate.formvalidation(this)" id="cltrlfirst_name" placeholder="First Name"></div>
  </div>
  <div class="form-group overlaytxtalign col-md-5 is-empty">
    <div class="col-sm-15"><label class="lblhide" id="lblmsglast_name"><i class="fa fa-bell-o"></i> Input with warning</label><input type="string" data-key-type="last_name" data-attribute="string" class="form-control" maxlength="45" data-form-type="false" onkeyup="javascript:reqopsValidate.formvalidation(this)" id="cltrllast_name" placeholder="Last Name"></div>
  </div>
  <div class="form-group overlaytxtalign col-md-5 is-empty">
    <div class="col-sm-15"><label class="lblhide" id="lblmsggender"><i class="fa fa-bell-o"></i> Input with warning</label><input type="string" data-key-type="gender" data-attribute="string" class="form-control" maxlength="1" data-form-type="false" onkeyup="javascript:reqopsValidate.formvalidation(this)" id="cltrlgender" placeholder="Gender"></div>
  </div>
  <div class="form-group overlaytxtalign col-md-5 is-empty">
    <div class="col-sm-15"><label class="lblhide" id="lblmsgbirth_date"><i class="fa fa-bell-o"></i> Input with warning</label><input type="date" data-key-type="birth_date" data-attribute="date" class="form-control" maxlength="30" data-form-type="false"...

CSS

label.lblhide {
  display: none;
}




label.control-label-format {
  color: #ff5722 !important;
  font-size: 12px !important;
  line-height: 1.07142857 !important;
  font-weight: 400 !important;


}

JavaScript

$(function() {

var inputElements=document.getElementsByClassName
('modal-content')
   var cells=inputElements[0].getElementsByTagName('input') 
console.log(cells)

  $('.form-horizontal input:text ,[data-attribute="date"]').on('keydown keyup change', function() {
    var sel = $('#overlaycontent *[data-form-type]').length;
    if (sel <= 0) {
      $('#btnmodalsub').prop('disabled', false)
    } else {
      $('#btnmodalsub').prop('disabled', true)
    }
  })
})

let onchk = function(argument) {
  if ($(argument).prop('checked')) {
    $(argument).val(true)
  } else {
    $(argument).val(false)
  }
  reqopsValidate.formvalidation(argument)
}