JSFiddle - React, Tailwind, and code Playground

by JamesD

HTML

<form action="search" id="searchForm" onsubmit="return validateSearch()">
    <input type="text" name="byTitle" pattern="[a-zA-Z0-9]+" placeholder="Enter a word from title">
    <input type="text" name="byAuthor" pattern="[a-zA-Z]+\s[a-zA-Z]+" placeholder="First-name Last-name"> <!--  pattern="\w+ \w+" -->
    <input id="startDate" name="startDate" type="date">
    <input id="endDate" name="endDate" type="date">
    <input type="submit" name="submit" value="Submit">
</form>

JavaScript

function validateSearch() {

    var byTitle   = document.getElementById('searchForm').byTitle.value;
    // alert(byTitle);
    var byAuthor  = document.getElementById('searchForm').byAuthor.value;
    // alert(byAuthor);
    var startDate = document.getElementById('searchForm').startDate.value;
    //alert(startDate);
    var endDate   = document.getElementById('searchForm').endDate.value;
    //alert(endDate);       

    console.log(byTitle, byAuthor, startDate, endDate);
    
    if(!byTitle && !byAuthor && !startDate && !endDate){
        alert("Enter at least one search parameter!");
        return false;
    }
}
validateSearch();