Возможна ли HTML и JS валидация одновременно?

/** @param {HTMLFormElement} el */ 
function validate(el = document.forms['Ffq']) { 
    const { text, start, end } = validate.getVars(el) 
    // -,- 
    // console.log({ text, start, end }) 
    const isOK = [ 
        , !!text// можно убрать, т.к. `<input required>` 
        , (new Date(start) <= new Date(end)) 
    ].every(q => true === q) 
    if (isOK) return true; 
    else return false; 
} 
/** @param {HTMLFormElement} el */ 
validate.getVars = function getVars(el) { 
    const { value: text } = el['text']; 
    const { value: start } = el['start']; 
    const { value: end } = el['end']; 
    // -,- 
    return { text, start, end, } 
}

<script> 
  // ----> перехватчик исключительно для демонстрации работы кода 
  window.addEventListener('beforeunload', e => { 
    // - ,- catch 
    e.preventDefault() 
    e.stopPropagation() 
    // -, - 
    console.group('beforeunload') 
    formData = new FormData(document.forms['Ffq']); 
    console.dir(JSON.stringify([...formData])) 
    console.groupEnd() 
  }) 
  // <---- 
</script> 
<form name="Ffq" method="post" action="https://localhost" onsubmit="return validate(this)"> 
  <input type="submit" value="search" /> 
  <input type="text" name="text" required> 
  <input type="date" name="start"> 
  <input type="date" name="end"> 
</form>

function funBut() { 
    const isValid = validate() 
    if (isValid) { 
        document.getElementById("onebutn").style.display = "none"; 
        document.getElementById("twobutn").style.display = "block"; 
    } 
    // console.log({ isValid }) 
    return isValid 
} 
/** @param {HTMLFormElement} _formId */ 
function validate(_formId = document.forms['formId']) { 
    /** @type {HTMLInputElement[]} */ 
    const els = ['name', 'date', 'dateend', 'description'].map(q => _formId[q]) 
    const [_name, _date, _dateend, _description] = els 
    const [a, b, c, d] = els.map(el => el.value) 
    // -,- 
    const dd = (new Date(b) >= new Date(c)) 
    // -,- 
    if (dd) [_date, _dateend].forEach(validate.styleErr) 
    else[_date, _dateend].forEach(validate.styleOk) 
    if ([a, b, c, d].every(q => "" != q) && dd) return false; 
    return true; 
} 
validate.styleErr = style({ backgroundColor: 'rgba(250, 10, 10, 0.3)' }) 
validate.styleOk = style({ backgroundColor: 'rgba(130, 130, 255, 0.1)' }) 
/** @param {CSSStyleDeclaration} style */ 
function style(style) { 
    /** @param {HTMLElement} el */ 
    const f = el => { Object.assign(el.style, style) } 
    return f 
}

<script>// ---- > перехватчик исключительно для демонстрации работы кода 
window.addEventListener("beforeunload",o=>{o.preventDefault(),o.stopPropagation(),console.group("beforeunload"),formData=new FormData(document.forms.formId),console.dir(JSON.stringify([...formData])),console.groupEnd()}); 
// <----</script> 
 
<hr> 
2020-01-01T00:00<br> 
5000-01-01T00:00<br> 
<hr> 
 
<form id="formId" name="upload" action="http://localhost" method="POST" ENCTYPE="multipart/form-data" onsubmit="return funBut();"> 
  <div> 
    <div style="width:auto;"> 
      <label for="email">Имя</label> 
      <input type="text" id="name" name="name" maxlength="200" required value="имя" /> 
    </div> 
    <div class="form-group"> 
      <label for="date">Дата начала</label> 
      <input type="datetime-local" min="2020-01-01T00:00" max="5000-01-01T00:00" id="date" name="date" onChange="document.getElementById('dateend').min=this.value" required value="2020-01-01T00:00" /> 
    </div> 
    <div class="form-group"> 
      <label for="dateend">Дата окончания</label> 
      <input type="datetime-local" min="2020-01-01T00:00" max="5000-01-01T00:00" id="dateend" name="dateend" style="color: white;" required value="5000-01-01T00:00" /> 
    </div> 
    <div class="form-group" style="width:auto;"> 
      <label for="description">Комментарий</label> 
      <textarea id="description" name="description" maxlength="1500" required>коммент</textarea> 
    </div> 
    <div id="twobutn" style="display:none;"> 
      <div class="form-group" id="bch"> 
        <input type="button" id="check" name="check" style="color: white;" value="Проверить 2" onclick="funBut();"> 
      </div> 
      <div class="form-group" id="bby" style="width:auto;"> 
        <input type="submit" class='open-modal' id="create" name="create" value="Создать мероприятие"> 
      </div> 
    </div> 
    <div id="onebutn" class="form-group" style="width:auto;"> 
      <input type="button" id="check" name="check" style="color: white;" value="Проверить 1" onclick="funBut(); "> 
    </div> 
  </div> 
</form>