動態改變驗證規則與選擇輸入

Question

由於標題說我試圖添加動態驗證規則添加方法，但他們根本不工作。我可能會打電話給我的輸入，並選擇錯誤，我可能不知道我已經從堆棧上類似主題的代碼的添加位。

下面是我使用

echo '<form id="first_form" action="#" method="POST" style="border: 0; margin: 0;">'; 
        echo '<input type="hidden" value="'.$formid.'" name="formid">'; 
        echo '<h1>Season, Patch version & amount of champions</h1>'; 
        echo '<select id="season" name="season" onchange="checkseason();">'; 
         echo '<option value="newseasons" name="newseasons" selected>Season 3+</option>'; 
         echo '<option value="oldseasons" name="oldseasons">Season 1, 2</option>'; 
        echo '</select>'; 
        echo '<input id="patch" type="text" name="patch" placeholder="e.g. 4.20" required autofocus><br/>'; 
        echo '<input placeholder="Number of Champions" value="1" type="number" name="champ_number" min="1" max="20" required><br/>'; 
        echo '<input type="submit" value="next">'; 
       echo '</form>'; 

形式這裏是我的jQuery/javascript代碼

function checkseason(){ 
      d = document.getElementById("season").value; 

        $('#first_form').validate({ 
         rules: { 
          patch: { 
           required: true, 
           remote: { 
            url: "../checkpatch.php", 
            type: "post" 
            } 
           } 
          }, 
         messages: { 
          patch: { 
           required: "Please enter patch version.", 
           remote: "Patch with this number already exists." 
           } 
          }, 

        }); 


       $('select[name="season"]').on('change', function() { 
        if ($(this).val() == "newseasons") { 
         $('option[name="newseasons"]').rules('add', { 
          minlength: 4, 
          messages: { 
           minlength: "Please enter 3 numbers" 
          } 
         }); 
        } else if ($(this).val() == "oldseasons") { 
         $('option[name="oldseasons"]').rules('add', { 
          minlength: 8, 
          messages: { 
           minlength: "Please enter 8 numbers" 
          } 
         }); 
        } 
       }); 

     } 

更新：代碼現在工作得很好的消息和改變MINLENGTH但形式沒有按不包括啓動限制，我必須在這兩個下拉選項之間切換才能激活它們。

function checkseason(){ 
      d = document.getElementById("season").value; 

        $('#first_form').validate({ 
         rules: { 
          patch: { 
           required: true, 
           remote: { 
            url: "../checkpatch.php", 
            type: "post" 
            } 
           } 
          }, 
         messages: { 
          patch: { 
           required: "Please enter patch version.", 
           remote: "Patch with this number already exists." 
           } 
          }, 

        }); 


       $('select[name="season"]').on('change', function() { 
        if ($(this).val() == "newseasons") { 
         $('input[name="patch"]').rules('add', { 
          minlength: 4, 
          maxlength: 4, 
          messages: { 
           minlength: "Please enter 3 numbers" 
          } 
         }); 
        } else if ($(this).val() == "oldseasons") { 
         $('input[name="patch"]').rules('add', { 
          minlength: 8, 
          maxlength: 9, 
          messages: { 
           minlength: "Please enter 8 numbers" 
          } 
         }); 
        } 
       }); 
     } 
$(document).ready(function(){ 


      checkseason(); 
}); 

Answer 1

$('option[name="oldseasons"]').rules('add', .... 

您不能附加規則的<option>元素。 （AFAIK，<option>不能包含name屬性任一）。

規則只能附着到<select>，<textarea>，以及各種類型的<input>元件。

就您的代碼而言，可能是一個錯字，但只要<select>本身發生更改，就無法更改<select>元素的規則。用戶永遠無法滿足這一點。也許你打算把規則附加到別的東西上。

我也注意到你有與HTML5驗證屬性內聯定義的規則。雖然jQuery驗證插件可以選擇這些，但您也可以在.validate()方法中定義規則。您應該保持一致，以便您的代碼更易於理解和維護。要麼聲明所有驗證規則內聯，要麼在.validate()之內聲明所有驗證規則，儘量不要將兩種技術混合在一起。

---

的.validate()方法用於初始化插件並不會去任何功能或處理程序中，除了DOM準備。您正在使用內聯onchange處理程序來調用您的函數。當你已經有一個jQuery change處理程序時，這沒有任何意義。

只需用一個DOM準備處理...

$(document).ready(function() { 

    $('#first_form').validate({ // initialize plugin 
     .... 
    }); 

    $('select[name="season"]').on('change', function() { // your select change handler 
     // your '.rules()' methods, etc. 
    }); 

}); 

而且REMOVE從你的HTML標記內聯onchange處理程序。

<select id="season" name="season"> 
    .... 

• 我相信，當你做出選擇，你會想要patch規則發生變化。那麼你可以附上.rules()到patch;不是select而不是form。

UPDATE ....但形式不包括啓動限制我必須對那些2個下拉選項之間進行切換，以激活它們

• 您將需要一個初始minlength & maxlenth規則設置爲patch在頁面加載（在.validate()內執行此操作）。否則，默認選擇將沒有相關規則，直到第一次更改select。

• 由於錯誤消息是相同的，您不需要爲每個條件更改它。

• 從<option>元素中刪除name屬性。他們不用於任何事情。

• 刪除了patch內聯HTML5驗證屬性爲你使用.validate()和.rules()方法已經宣告你的規則。

工作演示：http://jsfiddle.net/yaw41bd3/