Home / Questions / 23944
Accepted
Otto
Asked: 2020-09-16 08:17:33 +0800 CST 2020-09-16 08:17:33 +0800 CST

How to add error message in jQuery code?

  • 772

Take this jsfiddle demo example , how to reference and guide to add effects and show error message.

Achieve the same effect, but the error message validation does not, when inserting a duplicate tag or a disallowed tag it shows the same error message "Cannot add duplicate tag" now when deleting the tag the error message remains not gone .

Full code running:

https://jsfiddle.net/39m2nukg/

//var arr_db = [];
var arr_db = ["html", "css", "jquery", "javascript", "php"];
var usuario_tags = [];
 
$(function(){
  $.ajax({
    url: 'tags.php',
    success: function(result) {
      var returnedData = JSON.parse(result);
      var total = returnedData.length;
      for(var i = 0; i < total; i++) {
        arr_db.push(returnedData[i]);
      }
    }
  });
 
  // ::: TAGS BOX

  $("#tags input").on({
    focusout : function() {
    var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
    var control = agregar_tags(txt.toLowerCase(), usuario_tags);
    var verifica_tags = control_tags(txt.toLowerCase(), arr_db);
 
    if(txt && control == false && verifica_tags == true) {
     $('#message').hide();
      $("<span/>",
      {
        text: txt.toLowerCase(), 
        insertBefore:this
      });
    } else {
      $('#message').show();
    }
 
    this.value = "";
  },
 
  keyup : function(ev) {
  // if: comma|enter (delimit more keyCodes with | pipe)
  if(/(188|13)/.test(ev.which)) $(this).focusout();
}
});
 
  $('#tags').on('click', 'span', function() {
    $(this).remove();
    quitar_tags(usuario_tags, $(this).text());
  });
});
 
function agregar_tags(tag, arrtags) {
  var index = -1;
  var resultado = control_tags(tag, arrtags);
 
  for(var i = 0; i < arrtags.length; i++) {
    if(arrtags[i] === tag) {
      index = i;
    }
  }
 
  if(index > -1) {
    arrtags[index] = tag;
  } else {
    arrtags.push(tag);
  }
   return resultado;
}
 
function control_tags(needle, haystack) {
  var length = haystack.length;
  for(var i = 0; i < length; i++) {
    if(typeof haystack[i] == 'object') {
      if(arrayCompare(haystack[i], needle)) return true;
    } else {
      if(haystack[i] == needle) return true;
    }
  }
  return false;
}
 
function quitar_tags(array, element) {
  const index = array.indexOf(element);
  array.splice(index, 1);
}
#tags{float:left;border:1px solid #ccc;padding:5px;font-family:Arial;} #tags > span{cursor:pointer;display:block;float:left;color:#fff;background:#789;padding:5px;padding-right:25px;margin:4px;} #tags > span:hover{opacity:0.7;} #tags > span:after{position:absolute;content:"×";border:1px solid;padding:2px 5px;margin-left:3px;font-size:11px;} #tags > input{background:#eee;border:0;margin:4px;padding:7px;width:auto;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form method="post">

   <label>Título<br/>
  <input type="text" name="titulo" maxlength="255" />
   </label><br/>

   <label>Noticia<br/>
 <textarea name="novedad"></textarea>
   </label><br/><br/>

<div id="tags">
  <input type="text" value="" placeholder="Add a tag" />
</div>
<p id="message" style="display:none">No se puede añadir una etiqueta duplicada.</p><br/><br/><br/>

<button type="submit">Publicar noticia</button>
</form>

I am misapplying the parameters or variables in the code jQuery is very different from php, could you guide me what I should take into account to correctly apply these error messages.

How do I correctly apply these error messages to jQuery code?

Example:

Show error message when adding a duplicate tag.

enter image description here

Show error message when trying to add a not allowed tag, the allowed tags are taken from this direct variable or from a databasevar arr_db = [];

enter image description here

Limit the maximum of labels and at the same time show an error message. enter image description here

javascript

4 Answers

  1. Doe.

    First of all I invite you to use a clearer code with more descriptive variables to make it more readable, simple and effective. In this way, you will not only know more easily where the errors are, but also have better control of the code, no matter how large it is. Starting to use a style guide could be a good step.

    As far as what you're trying to do, it seems to me that the code could be made even simpler. A basis for this could be the following working example:

    NOTE: The only thing you would have to do to finish it would be to add the query, addition and removal of these tags via ajax in their respective methods.

    (function() {
  var allowedTags = ['html', 'css', 'javascript', 'php', 'java', 'mysql'];
  var tags = {};
  var input = $('#input');
  var errors = {
    invalid: 'La etiqueta no es válida.',
    duplicated: 'No es posible agregar etiquetas duplicadas.',
    noMoreTags: 'No posible agregar más de 4 etiquetas.'
  };

  $('.allowed_tags').text(allowedTags.toString());

  input.blur(function() {
    var tag = $(this).val().trim();
    if (!tag) return;
    if (Object.keys(tags).length >= 4) return throwErr(errors.noMoreTags);
    if (!isValidTag(tag)) return throwErr(errors.invalid);
    if (tagExists(tag)) return throwErr(errors.duplicated);

    addTag(tag.toLowerCase());
    $(this).val('');
  });

  input.focus(function() {
    $('.error').text('');
  });

  $('.tags').on('click', '.tag', function() {
    removeTag($(this).text().toLowerCase());
  });

  function isValidTag(tag) {
    return allowedTags.indexOf(tag) > -1;
  }

  function tagExists(tagName) {
    return tags.hasOwnProperty(tagName);
  }

  function addTag(tagName) {
    var tag = $('<span>', { class: 'tag', text: tagName });
    tag.name = tagName;
    $('.container .tags').append(tag);
    tags[tagName] = tag;
  }

  function removeTag(tagName) {
    if (tags.hasOwnProperty(tagName)) {
      tags[tagName].remove();
      delete tags[tagName];
    }
  }

  function throwErr(message) {
    $('.error').text(message);
    input.val('');
  }
})();
    .container {
    margin-top: 10px;
    display: inline-block;
    position: relative;
    border: 1px solid #ccc;
    padding: 0.5em;
  }

  .container .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .container .wrapper .tags span.tag {
    padding: .5em .8em;
    background: #16a085;
    color: #fff;
    text-align: center;
    margin-right: 0.2em;
    border-radius: 3px;
    cursor: pointer;
  }

  input[type=text] {
    padding: .5em;
  }

  .error {
    display: inline-block;
    color: #c0392b;
  }
    <!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div>
    Etiquetas válidas: 
    <span class="allowed_tags"></span>
  </div>
  <div class="container">
    <div class="wrapper">
      <div class="tags"></div>
      <input type="text" id="input" placeholder="Nueva etiqueta">
    </div>
  </div>
  <div class="error"></div>
  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
</body>
</html>

    • 8

  2. I leave the example made without using jQuery , it is not as elegant as the one by @MauroAguilarBustamante but it fulfills the function requested.

    I put the prototypes of the functions that I just programmed.

    • function esDuplicado(texto)
    • function esEtiquetaValida(texto,contiene)
    • function borrar(texto)
    • generarBaseDatos()
    • function agregarEtiqueta()

    Also, status messages are added correctly.

    • "Etiqueta duplicada."
    • "Listo."
    • "Escribiendo..."
    • "Etiqueta no válida."

    End code:

    function esDuplicado(texto)
{
	var devuelve=false
	var lista=etiquetas.getElementsByTagName("a")
	for(var i=0;i<lista.length;i++)
	{
		if(lista[i].textContent==texto+" x; ")
		{
			devuelve=true;
			break;
		}
	}
	return devuelve
}
function esEtiquetaValida(texto,contiene)
{
	var devuelve=false 
	var etiquetasValidas = ["html", "css", "javascript", "php", "java", "mysql"]
	var longitudTexto = texto.length
	for(var i=0;i<etiquetasValidas.length;i++)
	{
		var condicion
		if( contiene=="contiene" )
		{
			cortado=etiquetasValidas[i].slice(0,longitudTexto)
			condicion = cortado==texto
		}
		else
		{
			condicion=etiquetasValidas[i]==texto
		}
		if(condicion)
		{
			devuelve=true;
			break;
		}
	}
	return devuelve
}
function generarBaseDatos()
{
	baseDatos=[]
	var etiquetasTags=etiquetas.getElementsByTagName("a")
	for(var i=0;i<etiquetasTags.length;i++)
	{
		var texto=etiquetasTags[i].innerText.split(" x;")[0]
		baseDatos[baseDatos.length]=texto
	}
	baseDeDatos.innerHTML="baseDatos="
	baseDeDatos.innerHTML+=JSON.stringify(baseDatos)
}
function borrar(texto)
{
	var eti=etiquetas.getElementsByClassName("eti_"+texto)[0];
	eti.parentNode.removeChild(eti);
	generarBaseDatos()
	entrada.select()
}
function agregarEtiqueta()
{
	var valor=entrada.value
	var estado_texto
	if( esEtiquetaValida(valor,"contiene") )
	{
		var condicion_1 = !esDuplicado(valor)
		var condicion_2 = esEtiquetaValida(valor,"es")
		if( condicion_1 && condicion_2 )
		{
			var texto=""
			texto+="<a class=eti_"
			texto+=valor
			texto+=">"
			texto+=valor
			texto+=" <button onclick=borrar(\""
			texto+=valor
			texto+="\")>x</button>; </a>"
			etiquetas.innerHTML+=texto
			
			estado.innerHTML="Etiqueta añadida."
			generarBaseDatos()
			
			entrada.value=""
		}
		else
		{
			if(condicion_2)
			{
				estado_texto="Etiqueta duplicada."
				entrada.value=""
				estado.innerHTML=estado_texto
			}
			if( valor=="" && !condicion_2 )
			{
				estado_texto="Listo."
				estado.innerHTML=estado_texto
			}
			if( valor!="" && !condicion_2 )
			{
				estado_texto="Escribiendo..."
				estado.innerHTML=estado_texto
			}
		}
	}
	else
	{
		estado_texto="Etiqueta no válida."
		entrada.value=""
		estado.innerHTML=estado_texto
	}
}
    <body>
	<p>Etiquetas validas: "html", "css", "javascript", "php", "java", "mysql"</p>
	<p>
		<input
			id="entrada"
			placeholder="Escriba la etiqueta."
			onkeyup="agregarEtiqueta()"
		></input> <a>Estado: <a id=estado>Listo.</a></a>
	</p>
	<p>Etiquetas: <a id=etiquetas></a></p>
	<p>
		Base Datos:
		<button onclick=generarBaseDatos()>Generar</button>
		<button
	onclick="baseDeDatos.innerHTML='baseDatos=[]';baseDatos=[]">
			Vaciar
		</button>
		<div id=baseDeDatos>baseDatos=[]</div>
	</p>
</body>

    • 7
  3. Best Answer

    PHP: This is how you save it in a single record:

    $sentencia->bind_param('is', $id, $tags);
$sentencia->execute();

    JavaScript: try the following code (only Js has been modified), I have already modeled this to follow the object-oriented programming (OOP) paradigm, the documentation is already included in the code:

    $(function() {
  'strict mode';

  /**
   * Creamos un nuevo tipo de error para manejarlo más adelante.
   * @param {string} msg
   */
  var InvalidTag = function (msg) {
    this.message = msg;
    this.stack = (new Error()).stack;
  }
  InvalidTag.prototype = Object.create(Error.prototype);
  InvalidTag.prototype.name = 'InvalidTag';

  /**
   * Tags es creado para ser manejado como objeto (POO).
   * 
   * @type {Object}
   * 
   * @property {Array<string>} allowed  Etiquetas permitidas.
   * @property {number} maxAllowed      Número máximo permitido de etiquetas.
   * @property {Object} errors          Contiene los objetos de errores.
   * @property {Object} container       Es creado de `null` para que no herede un prototipo.
   */
  var Tags = {
    allowed: ['html', 'css', 'javascript', 'php', 'java', 'mysql'],
    maxAllowed: 4,
    errors: {
      invalid: new InvalidTag('The tag is invalid.'),
      duplicated: new InvalidTag('You can not add duplicate labels.'),
      noMoreTags: new InvalidTag('Can not add more than 4 tags.')
    },

    container: Object.create(null),

    /**
     * Aquí van las reglas para normalizar la cadena de texto que representa la
     * etiqueta.
     * 
     * @param  {string} tag
     * @return {string}
     */
    normalize: function(tag) {
      return tag.toLowerCase().trim();
    },

    /**
     * Añade una etiqueta a la propiedad `container` de este objeto y al elemento
     * en el DOM.
     * 
     * @param {string} tag
     * @param {Boolean} normalize
     */
    add: function (tag, normalize) {
      tag = normalize ? this.normalize(tag) : tag;

      if (Object.keys(this.container).length >= this.maxAllowed)
        throw this.errors.noMoreTags;

      if (!this.isValid(tag)) throw this.errors.invalid;
      if (Tags.exists(tag)) throw this.errors.duplicated;

      this.container[tag] = $('<span>', { class: 'tag', text: tag });
      $('.container .tags').append(this.container[tag]);
    },

    /**
     * Remueve una etiqueta en la propiedad `container` de este objeto y el elemento
     * en el DOM.
     * 
     * @param {string} tag
     * @param {Boolean} normalize
     */
    remove: function(tag, normalize) {
      tag = normalize ? this.normalize(tag) : tag;

      if (this.exists(tag)) {
        this.container[tag].remove();
        delete this.container[tag];
      }
    },

    /**
     * Devuelve un booleano en función de que la etiqueta (tag) se encuentre dentro
     * de las etiquetas permitidas (this.allowed).
     * 
     * @param  {string}  tag
     * @return {Boolean}
     */
    isValid: function (tag) {
      return this.allowed.indexOf(tag) > -1;
    },

    /**
     * Valida que la etiqueta ya exista dentro del contenedor (container).
     * 
     * @param  {string} tag
     * @return {Boolean}
     */
    exists: function (tag) {
      return (tag in this.container);
    },

    /**
     * Devuelve un los textos de las etiquetas separadas por coma (,).
     *
     * @see {@link https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/join}
     * @return {string}
     */
    toString: function () {
      return Object.keys(this.container).join();
    }
  };

  /**
   * Este evento se ejecutará cada que el usuario presione «Enter» debido a que
   * el evento está a la espera de un `submit`.
   *
   * Descomentar estas líneas siguientes para habilitar el envío de datos.
   * Está comentada para funcionar en StackOverflow Español.
   */
  /**
  $('.AjaxForm').on('submit',function(e) {
    var data = {};
    data.tags = Tags.toString();

    $.ajax({
      method: 'POST',
      url: 'post.php',
      data: data,
      success: function(response) {
        console.log(response);
      }
    });

    e.preventDefault();
    e.stopPropagation();
  });*/

  $('.allowed_tags').text(Tags.allowed.toString());

  $(document).on({
    /**
     * Función que se encargará de añadir las etiquetas.
     * 
     * @param  {Event} e
     */
    keyup: function handler (e) {
      if (e.type !== 'blur' && e.type !== 'keyup') return;
      if (e.type === 'keyup' && $(this).val().indexOf(',') === -1) return;
      if ($(this).val() === '') return;

      try {
        Tags.add( $(this).val().replace(',', ''), true );
      } catch (ex) {
        if (ex instanceof InvalidTag) $('.error').text(ex.message);
        else throw ex;
      } finally {
        $(this).val('');
      }
    },

    focus: function() {
      $('.error').text('');
    }
  }, '#input');

  $('.tags').on('click', '.tag', function() {
    Tags.remove( $(this).text(), true );
  });

});
    .container {
  margin-top: 10px;
  display: inline-block;
  position: relative;
  border: 1px solid #ccc;
  padding: 0.5em;
}

.container .wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container .wrapper .tags span.tag {
  padding: .5em .8em;
  background: #16a085;
  color: #fff;
  text-align: center;
  margin-right: 0.2em;
  border-radius: 3px;
  cursor: pointer;
}

input[type=text] {
  padding: .5em;
}

.error {
  display: inline-block;
  color: #c0392b;
}
    <!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div>
      Etiquetas válidas: 
      <span class="allowed_tags"></span>
    </div>
    <div class="container">
      <div class="wrapper">
        <div class="tags"></div>
        <form action="" method="POST" class="AjaxForm">
          <input type="text" id="input" placeholder="Nueva etiqueta">
          <input type="submit" value="Add tags">
        </form>
      </div>
    </div>
    <div class="error"></div>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  </body>
</html>

    • 4

  4. Considering that you can't send an array as such by post to php I thought of transforming it to json or separating the keywords by commas, using the last option the PHP should also be modified and use an explode instead of an implode to separate the array the commas, and with a foreach in php :

    // insert en la base
    $sentencia = $mysqli->prepare("INSERT INTO $tabla (id,addtags) VALUES (?, ?)");
    foreach ($tags as $key => $value) {
        if($value!=''){
            $sentencia->bind_param("is",$id, $value);
            $sentencia->execute();
        }
    }

    FULL PHP CODE:

        <?php
if (isset($_POST['tags']) && !empty($_POST['tags'])) {
    // Datos recibidos
    $tags = explode(',', $_POST['tags']);
    //Datos de conexión a la base
    $host = "localhost";
    $usuario = "root";
    $clave = "";
    $basedatos = "tags";
    $tabla = "tags";

    // Conectar a la base
    //  la variable $myslqi contendrá el objeto con la conexión
    $mysqli = mysqli_connect($host, $usuario, $clave, $basedatos);
    if (mysqli_connect_errno($mysqli)) {
        die( "Error al conectar a MySQL: " . mysqli_connect_error() );
    }

    // insert en la base
    $sentencia = $mysqli->prepare("INSERT INTO $tabla (id,addtags) VALUES (?, ?)");
    foreach ($tags as $key => $value) {
        if($value!=''){
            $sentencia->bind_param("is",$id, $value);
            $sentencia->execute();
        }
    }

    // Cerrar la conexión
    $sentencia = null;
    $mysqli = null;

    // Devolver una respuesta a JavaScript
    echo "Se grabó la etiqueta tags";
} 
?>

    FULL HTML CODE:

    <!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
</head>
<style type="text/css">
.container {
    margin-top: 10px;
    display: inline-block;
    position: relative;
    border: 1px solid #ccc;
    padding: 0.5em;
  }

  .container .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .container .wrapper .tags span.tag {
    padding: .5em .8em;
    background: #16a085;
    color: #fff;
    text-align: center;
    margin-right: 0.2em;
    border-radius: 3px;
    cursor: pointer;
  }

  input[type=text] {
    padding: .5em;
  }

  .error {
    display: inline-block;
    color: #c0392b;
  }
</style>
<body>
  <div>
    Etiquetas válidas: 
    <span class="allowed_tags"></span>
  </div>
  <div class="container">
    <div class="wrapper">
      <div class="tags"></div>
      <form action="" method="POST" class="AjaxForm">
        <input type="text" id="input" placeholder="Nueva etiqueta">
        <input type="submit" value="Add tags">
      </form>
    </div>
  </div>
  <div class="error"></div>
  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  <script type="text/javascript">
$(document).ready(function() {
  var allowedTags = ['html', 'css', 'javascript', 'php', 'java', 'mysql'];
  tags = [];
  var input = $('#input');
  var errors = {
    invalid: 'The tag is invalid.',
    duplicated: 'You can not add duplicate labels.',
    noMoreTags: 'Can not add more than 4 tags.'
  };


  $('.AjaxForm').on('submit',function(e) {
    var datos = Object.keys(tags);
    var d = '';
    $.each(datos,function(key,value){
      d+=value+',';
    });
    var url = 'recordbd.php';
    $.ajax({
      method: 'POST',
      url: url,
      data:{tags:d},
      success: function(response) {
        console.log(response);
      }
    });
    return false;
  });


  $('.allowed_tags').text(allowedTags.toString());


  input.blur(function() {
    var tag = $(this).val().trim();
    if (!tag) return;
    if (Object.keys(tags).length >= 4) return throwErr(errors.noMoreTags);
    if (!isValidTag(tag)) return throwErr(errors.invalid);
    if (tagExists(tag)) return throwErr(errors.duplicated);

    addTag(tag.toLowerCase());
    $(this).val('');
  });

  input.focus(function() {
    $('.error').text('');
  });

  $('.tags').on('click', '.tag', function() {
    removeTag($(this).text().toLowerCase());
  });

  function isValidTag(tag) {
    return allowedTags.indexOf(tag) > -1;
  }

  function tagExists(tagName) {
    return tags.hasOwnProperty(tagName);
  }

  function addTag(tagName) {
    var tag = $('<span>', { class: 'tag', text: tagName });
    tag.name = tagName;
    $('.container .tags').append(tag);
    tags[tagName] = tag;
  }

  function removeTag(tagName) {
    if (tags.hasOwnProperty(tagName)) {
      tags[tagName].remove();
      delete tags[tagName];
    }
  }

  function throwErr(message) {
    $('.error').text(message);
    input.val('');
  }

});
  </script>
</body>
</html>

    This resolves to send data to php to be saved in a database.

    • 3