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

Asked

Viewed 85 times

1

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

Example.

inserir a descrição da imagem aqui

When he has "Brazilian Music" he will not proceed.. HAS HOW TO DO THIS ?

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>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
  </body>
</html>

php javascript html

  • No input may have something more, as "Brazilian Music 2018" or should be filtered only if the content for Brazilian Music?

  • He will accept many things, but can not accept "Brazilian Music"

  • It is not wiser to make a list of what can be accepted?

  • No, pq is an api that puts.. and has several!

1 answer

6


A very simple check is to capture the Submit from the form and check the string coming 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>
   <input id="genero_post" type="text" value="Brazilian Music">
   <br>
   <button>Enviar</button>
</form>

If the string is "Brazilian music" (without differentiating between upper and lower case), the form is not sent (return false).

If you want to check if the string has the term "Brazilian Music" (also without case differentiating), you can use the method .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>
   <input id="genero_post" type="text" value="Brazilian Music 123">
   <br>
   <button>Enviar</button>
</form>

If you want to check several 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.

  • And when I want to block 2 terms.. That is, block "Brazilian Music" + "Term 02"

  • It doesn’t matter if it’s maiusculizo or minusculo then neh ? that way..

  • It can be integrated with this error message: https://getbootstrap.com/docs/4.0/components/forms/#server-side ?

  • Okay, I’d be very grateful.

  • after the gender input, you put this div: <div class="invalid-feedback text-hide">&#xA;Nome inválido&#xA;</div>&#xA;

  • and changes the if of jquery: if(/brazilian music|termo 2/.test(genero)){&#xA; $("#genero_post").addClass("is-invalid").next().removeClass("text-hide");&#xA; return false;&#xA; }

  • It looks like this: https://jsfiddle.net/n62tkegs/

  • Great, thank you ;)

  • Just the detail that things /between bars/ can behave in a non-literal way. For example, the point will fit with anything. This happens because it is a regular expression. The usage demonstrated by the dvd was perfect for your case, but it is good to remember that it is not the silver bullet at all times.

Show 4 more comments

Browser other questions tagged php javascript html

You are not signed in. Login or sign up in order to post.