Проверить список данных по базе данных, а затем запретить отправку формы

Question

Я пытаюсь заставить работать форму, в которой пользователь будет вводить необходимое значение для цвета, который отображается через список данных. Если они не отправили правильное слово, я хочу, чтобы моя форма не отправлялась. Я пробовал это несколько часов, но самое близкое, что я могу сделать прямо сейчас, - это просто создать элементы, которые необходимо ввести.

Вот мои необходимые входные данные:

<label for="one">Width of chessboard:</label> <input id="one" type="text" name="width" value="<?php $width;?>" pattern="[0-9]{2,4}" title="Numbers, min 2 digits max 4 digits"> 
    <span class="error" id="widthp">* </span> <br>
<input name="col1" type="text" id="five" value="<?php $col1; ?>" list="col1" pattern="[a-z]{1,10}" title="Lowercase, max 10 chars" required oninvalid="this.setCustomValidity('Please enter in a color from the dropdown')" oninput="this.setCustomValidity('')">
        <datalist id="col1" name="col1">
            <!-- options for colour 1 -->
            <option value="red">
            <option value="green">
            <option value="light blue">
            <option value="black">
            <option value="white">
            <option value="grey">
            <option value="brown">
            <option value="pink">
        </datalist>   
    <span class="error" id="col1p">* </span> <br> 
    <label for="six">Color 2:</label> 
    <!-- input for colour 2 -->
    <input name="col2" type="text" id="six" value="<?php $col2; ?>" list="col2" pattern="[a-z\s]{1,12}" title="Lowercase, max 12 chars" required oninvalid="this.setCustomValidity('Please enter in a color from the dropdown')" oninput="this.setCustomValidity('')">
            <datalist id="col2" name="col2">
                <!-- options for colour 2 -->
                <option value="orange">
                <option value="dark green">
                <option value="dark blue">
                <option value="black">
                <option value="white">
                <option value="purple">
                <option value="yellow">
            </datalist>         
        <span class="error" id="col2p">* </span> <br>

И вот то, что я смог проверить до сих пор:

function validateForm() {
  var width = document.forms["chessboardForm"]["width"].value; // get the value of width
  if (width == "") { // check if it is empty
    // if it is then change message and display false
    document.getElementById("widthp").innerHTML = "* \'Width of chessboard\' must be filled out with the following values: Numbers, max 4 digits";
    return false;
  }
}

Спасибо.