хотите, чтобы появилось окно с предупреждением, если количество выбранных кнопок меньше полученного

Question

У меня есть сетка кнопок, которые пользователь может выбрать. Что происходит, если пользователь вводит в текстовое поле количество кнопок, которые он хочет выбрать, а затем выбирает эти кнопки в сетке. Например, если пользователь вводит «2» в текстовом поле и выбирает кнопки «2», а затем пытается выбрать третью, появляется окно с предупреждением о том, что пользователь превысил ограничение, отмените выбор кнопки.

Теперь я хочу знать, как мне его кодировать, чтобы, если пользователь выбрал меньшее количество кнопок, чем в текстовом поле, появилось предупреждающее сообщение о выборе других кнопок?

Спасибо

Код в jsfiddle: нажмите здесь

Answer 1

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

<form onsubmit="validate.submit(); return false;">
 <textarea id="input"></textarea>
 <input type="submit" value="Submit" />
</form>

Достаточно просто, верно? Добавим DIV для отображения кнопок.

<form id="form" onsubmit="validate.submit(); return false;">
 <textarea id="input"></textarea> <br />
 <div id="buttons"></div> <hr />
 <input type="submit" value="Submit" />
</form>

Теперь давайте настроим функциональность JavaScript.

window.validate = ({
  config: {
    min: 1,  // Minimum amount of buttons allowed.
    max: 10  // Maximum amount of buttons allowed.
  },

  data: {
    state: 0,
    input: null,
    buttons: null,
    form: null
  },

  validate: function(refer) {
    // Refer is the amount of check boxes checked.

    if(refer < this.config.min)
        {
          alert("You checked to little!");
        }
    else if(refer > this.config.max)
        {
          alert("You checked to much!");
        }
    else
        {
          alert("You checked JUST right!");
        }
  },

  submit: function() {
    if(this.data.state === 1)
        {
          var refers = this.data.form.val,
              refer = 1;

          if(Object.prototype.toString.call(refers) === "[object Array]")
              {
                refer = refers.length;
              }

          this.validation(refer);
           return refer;
        }
    else
        {
          this.data.state = 0;

          try {
            var q = this.data.input.value;

             // Use Number object incase of cases where numbers have non-digit,
             // characters, like Infinity, NaN, 1e+10, ect.
            if(new Number(q).valueOf() === 0 && q.match(/\D/)) { throw new Error(); }
             q = eval(q);

            if(q > this.config.max)
                {
                  alert("We cannot process that many buttons!");
                }
            else if(q < this.config.min)
                {
                  alert("You must have at least " + this.config.min + " buttons!");
                }
            else
                {
                  q = Math.abs(q); // Negative to positive integer.
                                   // Textarea validation complete!

                  var html = "";

                  for(var i=q; i>0; i--)
                      {
                        html = html + "<input type=\"checkbox\" name=\"val\" />";
                      }

                  this.data.buttons.innerHTML = html;
                  this.data.state = 1;
                }
          } catch(e) {
            alert("You didn't enter a valid Number!");
          }
        }
  },

  setup: function() {
    window.onload = (function() {
      validate.data.form = document.getElementById("form");
      validate.data.input = document.getElementById("input");
      validate.data.buttons = document.getElementById("buttons");
    });

    delete this.setup;
     return this;
  }
}).setup();

Это был быстрый грязный пример. У вас может быть несколько ошибок, потому что я не проверял это. Удачи! : D