選択したボタンの数が少なくなった場合に警告ボックスを表示したい

Question

私はユーザーが選択できるグリッドを持っています。何が起こるかは、ユーザが選択したいボタンの数をテキストボックスに入力し、グリッド内のそれらのボタンを選択することである。たとえば、ユーザーがテキストボックスに「2」を入力し、「2」ボタンを選択してから3番目のボタンを選択しようとすると、ユーザーが制限を超えていることを示す警告ボックスが表示され、ボタンを選択解除します。

ここで私が知りたいのは、ユーザーがテキストボックスより少ないボタン数を選択すると、さらに多くのボタンを選択するよう警告メッセージが表示されるようにする方法です。

おかげ

jsfiddleでコード：クリックhere

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