Как добавлять сообщение ошибки к коду jQuery?

Возьмите этот пример демонстрации jsfiddle, как он снабжает ссылками или ведет, чтобы добавлять эффекты и показывать сообщение ошибки.

Добейтесь того же эффекта, но утверждение сообщения ошибки - нет, введя дублированную этикетку или не разрешенная этикетка показывает то же сообщение ошибки "не возможно добавлять дублированную этикетку" сейчас удалив этикетку, сообщение ошибки пребывает не исчезает.

Полный код в выполнении:

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();
      $("",
      {
        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;}








Я применяю плохо параметры или переменные в коде jQuery он очень различный в php, они могли бы вести меня, что я должен принимать во внимание, чтобы применять правильно эти сообщения ошибок.

Как я применяю правильно эти сообщение ошибок коду jQuery?

Пример:

Показывать сообщение ошибки, добавив дублированную этикетку.

introducir la descripción de la imagen aquí

Показывать сообщение ошибки, попробовав добавлять не разрешенную этикетку, этикетки tags разрешенные берутся с этой прямой переменной или с базы данных var arr_db = [];

introducir la descripción de la imagen aquí

Ограничивать максимум этикеток и одновременно показывать сообщение ошибки. introducir la descripción de la imagen aquí

8
задан 14.12.2018, 19:04
4 ответа

PHP: AsГ, - как ты это сохраняешь в одном sГіlo я регистрирую:

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

язык сценариев JavaScript: пытается со следующим cГіdigo (sГіlo был измененным Js), будьте уже я этому смоделировал, чтобы продолжать с парадигмой programaciГіn, ориентируемый объекты (POO), она documentaciГіn уже он приходит incluГ - дает в cГіdigo:

$(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>
5
ответ дан 03.12.2019, 20:18
  • 1
    Ты это можешь работать нормально, s и # 243; которое сейчас ll и # 225; дьявол как: Tags.allowed. Уже решение и # 233; это мая и # 250; sculas. –  Chofoteddy 22.09.2016, 06:36
  • 2
    @J.Doe Сейчас c и # 243; я говорю, что он совместим с tel и # 233; телефонные трубки м и # 243; подлые и уже у него нет в и # 241; ade этикетки, потеряв focus. –  Chofoteddy 22.09.2016, 18:38
  • 3
    Того, чтобы быть экспертом и # 237; не делай explode() и сними foreach в, как имей это, и # 237; схвати изначально. –  Chofoteddy 23.09.2016, 02:01
  • 4
    Уже они сохраняют с запятой в одном s и # 243; я это регистрирую. Если один из ответов, которые у тебя есть уже, ты функционировал, охарактеризуй ее как таковой. –  Chofoteddy 23.09.2016, 21:05
  • 5
    оно не функционирует, или мой мореход? –  hubman 12.02.2017, 04:25

Доу.

Прежде всего я приглашаю тебя использовать более ясный код и с более описательными переменными для того, чтобы он был более читабельным, простым и эффективным. Таким образом не только ты сумеешь более легкий, где находятся ошибки, но также приносить лучший контроль кода из-за большого, чем этот было. Начинать использовать путеводитель стиля могло бы быть хороший шаг.

Относительно которого ты пробуешь делать, мне кажется, что код мог бы становиться даже более простым. Основание для этого могло бы быть следующим функциональным примером:

ЗАМЕТЬ: Единственное, что ты был бы должен делать, чтобы это заканчивать, состояло бы в том, чтобы добавлять консультацию, прибавление и уничтожение этих этикеток посредством ajax в Ваших соответствующих методах.

(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>
6
ответ дан 03.12.2019, 20:18

Считая, что ты не можешь посылать array, также как и такой из-за post в php я думал о том, чтобы преобразовать в json ó отделять ключевые слова из-за запятых, используя последний выбор PHP также должен будь быть измененным и использовать explode вместо implode, чтобы отделять в array запятые, и с foreach в 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();
        }
    }

ПОЛНЫЙ КОД PHP:

    <?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";
} 
?>

ПОЛНЫЙ КОД HTML:

<!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>

Это решает посылать данные в php, чтобы сохраняться в базе данных.

4
ответ дан 03.12.2019, 20:18
  • 1
    Привет, преобразовывать в json ты относишься в c и # 243; я говорю Аякс или в c и # 243; я говорю дружелюбного PHP. –  Otto 22.09.2016, 02:42

Я оставляю пример сделанным, не используя jQuery, он не является таким элегантным как @MauroAguilarBustamante, но выполняет функцию, которую он просит.

Я помещаю прототипы функций, которые я только что запрограммировал.

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

Кроме того, добавляются правильно сообщения состояния.

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

Конечный код:

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
ответ дан 03.12.2019, 20:18

Теги

Похожие вопросы