添加驗證，並且不允許使用jQuery單詞計數提交表單

Question

我有一個文本區域，其中可以不超過100個單詞。我發現了一個很好的指示器腳本，可以對頁面上的單詞進行倒計時，但如果用戶輸入的單詞超過100個單詞，它仍然允許用戶提交。我需要在其中集成驗證。 注意：我在其他地方使用了validate.js。

$(document).ready(function() { 
    $("#word_count").on('keyup', function() { 
     var words = this.value.match(/\S+/g).length; 
     if (words > 100) { 
      // Split the string on first 100 words and rejoin on spaces 
      var trimmed = $(this).val().split(/\s+/, 100).join(" "); 
      // Add a space at the end to keep new typing making new words 
      $(this).val(trimmed + " "); 
     } 
     else { 
      $('#display_count').text(words); 
      $('#word_left').text(100-words); 
     } 
    }); 
}); 

Answer 1

一個快速和骯髒的黑客將從$('#display_count')抓取文本，轉換爲數字並查看它是否大於或等於100停止提交表單。由於您使用的jQuery Validation Plugin（假設），你可以這樣做：

$(".myForm").validate({ 
    submitHandler: function(form) { 
     var total = parseInt($('#display_count').text(), 10); 
     if (total >= 100) { 
      alert ("Max limit reached"); 
      return; 
     } 
     $(form).submit(); 
    } 
}); 

更多關於this Fiddle

Answer 2

爲什麼不在文本區域添加最大長度屬性？它是否符合您的要求？

http://www.w3schools.com/tags/att_textarea_maxlength.asp

不，它不需要，因爲算上字符，而不是單詞。但是，如果您應用該腳本，則文本將被修剪並僅佔用前100個單詞。 該生產線是

var trimmed = $(this).val().split(/\s+/, 100).join(" "); 

其中100是極限

這裏是我的回答

$.validator.addMethod("wordCount", function(value) { 
      var words = value.match(/\S+/g).length; 
      return words < 100; 
     }, 'You can enter max 100 words'); 

     $("#form").validate({ 
      rules: { 
       textarea : "wordCount" 
      } 
     }); 

而HTML是

<form name="form" id="form" method="get" > 
    <textarea name="textarea" ></textarea> 
    <input type="submit" value="submit" onclick="return $('#form').valid()" /> 
</form>