Make datalist erforderlich

Question

Ich möchte, dass der Benutzer ein Formular nicht senden kann, es sei denn, sie haben etwas aus dem Dropdown-Feld datalist ausgewählt, das während der Eingabe angezeigt wird. Wenn sie nur etwas zufällig eingegeben haben, möchte ich nicht wollen, dass das Formular übermittelt wird.

Wenn dies nicht möglich ist, wäre es eine bessere Option zu überprüfen, ob der eingegebene Text in der Datenliste angezeigt wird, wenn der Benutzer sendet?

<form method="post"> 
    <input type="text" list="browsers"> 
    <datalist id="browsers"> 
     <option value="Internet Explorer"> 
     <option value="Firefox"> 
     <option value="Chrome"> 
     <option value="Opera"> 
     <option value="Safari"> 
    </datalist> 
    <input type="submit" name="submit"> 
</form> 

<?php 
if(isset($_POST['submit'] 
    // function to check if something from the datalist was clicked and NOT just typed 
}else{ 
    echo'Select something from the datalist!'; 
} 

Während ich die datalist je nach Bedarf eingestellt werden, dies kann leicht umgangen werden.

Answer 1

Wenn Sie mit Server-Validierung gehen wollen,

<form method="post"> 
    <input type="text" list="browsers" name="items" required> 
    <datalist id="browsers" > 
     <option value="Internet Explorer"> 
     <option value="Firefox"> 
     <option value="Chrome"> 
     <option value="Opera"> 
     <option value="Safari"> 
    </datalist> 
    <input type="submit" name="submit"> 
</form> 

<?php 
if(isset($_POST['submit'] 
    $check = array('Internet Explorer', 'Firefox', 'Chrome', 'Opera', 'Safari'); 

if(in_array($_POST['items'], $check)){ 
    // Code to be execute. 
} else{ 
    echo'Select something from the datalist!'; 
} 

}else{ 
    echo'Select something from the datalist!'; 
} 

Answer 2

Verwenden Sie required in Eingabe Tag, das die gleiche ID wie der Datalist Sie Targeting hat, überprüfen Sie den Benutzer zwingen, etwas einzugeben.

<form method="post"> 
    <input type="text" list="browsers" required> 
    <datalist id="browsers"> 
     <option value="Internet Explorer"> 
     <option value="Firefox"> 
     <option value="Chrome"> 
     <option value="Opera"> 
     <option value="Safari"> 
    </datalist> 
    <input type="submit" name="submit"> 
</form> 

<?php 
if(isset($_POST['submit'] 
    // function to check if something from the datalist was clicked and NOT just typed 
}else{ 
    echo'Select something from the datalist!'; 
} 

Der Benutzer wird jedoch nicht daran gehindert, eine Eingabe zu geben, die nicht im Dropdown-Menü aufgeführt ist. Das muss vor dem Abschicken per Javascript überprüft werden.

Wenn Sie etwas Hilfe mit dem js wünschen, werde ich glücklich sein zu helfen.