block certain words in a search form

Question

I have been searching the internet but I can not find anything to do what I want. I would like to receive from your help

Try something that when you do the search gave a 404 error but this does not work for me because I do not want the search to be done

<div class="header-search">
    <form method="get" id="searchform" action="/?s=">
        <input class="input-group-field" value="Search..." name="s" id="s" onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" type="text">

        <input class="fa fa-search" type="submit" id="searchsubmit" value="">
    </form>
</div>

I want to block words like xxx, xnxx, porn I want that when they look for these things the form does not do the search leave any alerts warning that this can not be searched

Answer 1

Something like the following jQuery/Javascript should work just fine.

jQuery(document).ready(function( $ ) {
    var searchBox = $("#searchform #s").val(); //Get value of search field
    var searchButton = $("#searchform #searchsubmit"); //Get search button element

    var search_string_check = function(searchBox,searchButton) {

        var blockedWords = "xxx,porn,sex"; //define blocked words here
        blockedWords = blockedWords.split(','); //turn string into array

        if(blockedWords.includes(searchBox)){ //check if the searched value is in the blocked words list
            searchButton.attr("disabled", ""); //if yes disable the button
            alert("Your search contains a blocked word: " + searchBox + ". To continue your search please remove the blocked word."); //alert saying they cannot search for their entered blocked word
        } else {
            searchButton.removeAttr("disabled"); //if no remove disabled button
        }
    }

    search_string_check(searchBox,searchButton); //fire the function

    $('#searchform #s').change(function() { //on change of the search box value do something
        searchBox = $("#searchform #s").val(); //Get value of search field
      search_string_check(searchBox,searchButton); //fire the function
    });
});

You may prefer to do it on key up or key down instead of just the changing of the value, it's up to you, if so replace the last part of code with:

$('#searchform #s').keyup(function() { //on change of the search box value do something
    search_string_check(searchBox,searchButton); //fire the function
}