How to make an input does not accept the term "Brazilian Music"

1

That is, if you typed "Brazilian Music" inside the imput it gives an error and does not accept.

Example.

Whenyouhave"Brazilian Music" it will not go on .. HOW DO YOU DO IT?

MY CODE:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Gerador de post - musicas.onlinee.top</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
  </head>

<style media="screen">
  body {
    background: #daeaed;
    background: -moz-linear-gradient(top,rgba(218,234,237,1) 0,rgba(252,248,231,1) 44%,rgba(237,247,228,1) 100%);
    background: -webkit-linear-gradient(top,rgba(218,234,237,1) 0,rgba(252,248,231,1) 44%,rgba(237,247,228,1) 100%);
    background: linear-gradient(to bottom,rgba(218,234,237,1) 0,rgba(252,248,231,1) 44%,rgba(237,247,228,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#daeaed',endColorstr='#edf7e4',GradientType=0);
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Open Sans',sans-serif !important;
    font-weight: normal !important;
  }
</style>

  <body>

    <div class="container">
      <div class="logo" style="margin-top: 3%;margin-bottom: 20px;">
        <center>
          <a href="/postador"><img src="https://musicas.onlinee.top/imagens/logotipo.png"alt="Postador - musicas.onlinee.top" style="max-width: 230px;"></a>
        </center>
      </div>
      <div class="formulario_gerar" style="background: #fff;border-radius: 10px;border: 1px solid #ccc;padding: 40px;">
        <form action="grava.php" method="post">
          <div class="form-row">
          <div class="form-group col-md-12">
              <label><i class="fas fa-font"></i> Titulo da postagem</label>
              <input class="form-control" id="titulo" name="titulo_post" value=""  autocomplete="off" required>
            </div>
            <div class="form-group col-md-6">
              <label><i class="fas fa-link"></i> Capa (poster)</label>
              <input class="form-control" id="link_capa" name="link_capa" value="<?=$capa_post?>" autocomplete="off" required>
            </div>
            <div class="form-group col-md-6">
              <label><i class="fas fa-user"></i> Artista (cantor)</label>
              <input class="form-control" id="artista_cantor" value="<?php if(!isset($artist->contributors[0]->name)){echo "Vários artistas";}else{while($x <= $num_artist) {if(isset($artist->contributors[$cont++]->name)) {if($virgula++ > 0){echo ", ";}echo $artist->contributors[$contar_artista++]->name;}$x++;}} ?>" name="artista_cantor" autocomplete="off" required>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label><i class="fas fa-folder"></i> Música/Album</label>
              <input class="form-control" id="musica_album" name="musica_album" value="<?=$json_str['title'];?>" autocomplete="off" required>
            </div>
            <div class="form-group col-md-6">
              <label><i class="fas fa-tag"></i> Gênero</label>
              <input class="form-control" id="genero_post" name="genero" value="<?php echo $genero_novo ?>" name="genero_post" autocomplete="off" required>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label><i class="fas fa-tag"></i> Ano de lançamento</label>
              <input class="form-control" id="ano_de_lancamento" value="<?php if(isset($json_str['release_date'])) { echo substr($json_str['release_date'], 0, -6); }?>" name="ano_de_lancamento" autocomplete="off" required>
            </div>
            <div class="form-group col-md-6">
              <label><i class="fas fa-file"></i> Formato</label>
              <input class="form-control" id="formato_post" name="formato_post" value="<?php if($json_str["nb_tracks"] > 1) { echo "ZIP / MP3 / 320 Kbps";}else{ echo "MP3 / 320 Kbps";} ?>" autocomplete="off" required>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group col-md-12">
              <label><i class="fas fa-download"></i> Link de download</label>
              <input class="form-control" name="url_download" id="link_de_download" autocomplete="off" required>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group col-md-12">
              <label><i class="fas fa-list-ul"></i> Lista de músicas</label>
              <textarea class="form-control" name="lista_musicas" id="lista_de_musicas" rows="5" required><?php $x = 1;while($x <= $num_tracks) {echo $title = $count_number++.'. '.$json_str['tracks']['data'][$contar++]['title'].'&#10;';$x++;} ?></textarea>
            </div>
          </div>
          <center>
            <button type="submit" name="publicar" class="btn btn-primary"><i class="fas fa-code"></i> Publicar</button>
          </center>
        </form>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
  </body>
</html>
    
asked by anonymous 21.06.2018 / 23:53

1 answer

6

A very simple check is to capture the form submit and check the string from input :

$("form").submit(function(){
   
   var genero = $("#genero_post").val().toLowerCase().trim();
   
   if(genero == "brazilian music"){
      console.log("Ops!");
      return false;
   }
   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form><inputid="genero_post" type="text" value="Brazilian Music">
   <br>
   <button>Enviar</button>
</form>

If the string is " brazilian music " (not case sensitive), the form is not sent ( return false ).

If you want to check if the string " Brazilian Music " is not case sensitive, you can use the .test() :

$("form").submit(function(){
   
   var genero = $("#genero_post").val().toLowerCase();
   
   if(/brazilian music/.test(genero)){
      console.log("Ops!");
      return false;
   }
   
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form><inputid="genero_post" type="text" value="Brazilian Music 123">
   <br>
   <button>Enviar</button>
</form>
  

If you want to check multiple terms, separate them with a vertical bar    | :

/termo 1|termo 2|termo 3/.test(genero)
     

But if there are many terms, I would suggest using an array.

    
22.06.2018 / 00:00