проверки формы подсчета слов в javascript - PullRequest
Новая
       49

проверки формы подсчета слов в javascript

1 голос
/ 19 марта 2011

Я пытался все, чтобы попытаться решить это сам, но не могу найти какие-либо решения в Google, или мои php навыки новичка не подходят для этой задачи.Поэтому, пожалуйста, может кто-нибудь показать мне, как я могу сделать форму ТОЛЬКО, если люди написали 15 слов или больше.Любые предложения будут очень признательны.Ниже приведены CSS, JavaScript и HTML. 

#container { 
    background: #ededed; 
    border: 1px solid #ddd; 
    margin: 0 auto; 
    padding: 10px;
    position: relative;
    width: 638px;
}

.error { color: #f00; }

ol.forms { list-style: none; overflow: hidden; }
ol.forms li { float: left; margin-bottom: 12px; width: 100%; }
ol.forms label { cursor: pointer; display: block; }
ol.forms textarea {
    border: 1px solid #ddd;
    float: left; 
    font: 14px/1.5em Georgia, Times, serif; 
    height: 120px; 
    margin-right: 5px;
    overflow-y: auto; 
    padding: 5px;
    width: 500px; 
}
ol.forms textarea:focus { border: 1px solid #000; }
ol.forms div.wordCount { float: left; font-size: 20px; line-height: 30px; }

#quick50 {
    background: #fff;
    border: 1px solid #ddd;
    font-size: 11px;
    left: 5px; 
    padding: 5px;
    position: fixed; 
    width: 188px; 
}

$(document).ready(function() {
    $("[class^='count[']").each(function() {
        var elClass = $(this).attr('class');
        var description = 0;
        var maxWords = 0;
        var countControl = elClass.substring((elClass.indexOf('['))+1, elClass.lastIndexOf(']')).split(',');

        if(countControl.length > 1) {
            description = countControl[0];
            maxWords = countControl[1];
        } else {
            maxWords = countControl[0];
        }

        $(this).after('<div class="wordCount"><strong>0</strong> Words</div>');
        if(description > 0) {
            $(this).siblings('.wordCount').addClass('error');
        }

        $(this).bind('keyup click blur focus change paste', function() {
            var text = jQuery.trim($(this).val()).replace(/\s+/g," ");
            var numWords = text.split(' ').length;
            if($(this).val() === '') {
                numWords = 0;
            }   
            $(this).siblings('.wordCount').children('strong').text(numWords);

            if(numWords < description || (numWords > maxWords && maxWords != 0)) {
                $(this).siblings('.wordCount').addClass('error');
            } else {
                $(this).siblings('.wordCount').removeClass('error');    
            }

        });

    });
});

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Word Count</title>
<link href="wordcount.css" type="text/css" rel="stylesheet" media="screen,projection" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="wordcount.js"></script>
</head>

<body>
<div id="container">
    <h1>jQuery Word Count</h1>


    <div class="quickContain">
    <div id="quick50">
        <h2>50 words for quick copying</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam leo orci, porta eget, tincidunt sit amet, sagittis id, turpis. Aenean sed metus at leo ullamcorper dapibus. Duis vitae risus dignissim lectus dapibus faucibus! In porttitor, ante non adipiscing ultricies, magna velit blandit dui, a tempus ligula dolor eu orci? Sed.</p>
    </div>
    </div>

    <ol class="forms">
        <form action="submitcontent.php" method="post">

        <li><label for="minWord">Min Word Textarea <em class="help">(15 words or more)</em></label>
            <textarea onkeyup="limitWords(this,5);" name="minWord" class="count[15,0]" id="minWord"></textarea>
        </li>


        <input type="submit" value="Submit Content"  onclick="return doSubmit()" />
        </form>
    </ol>


</div>


</body>
</html>

Ответы [ 2 ]

4 голосов
/ 19 марта 2011

С макушки головы, что-то вроде этого? 

<textarea id="some-textarea" onkeypress="activateSubmit();">
</textarea>
<input type="submit" value="Submit" id="submit-button" disabled="disabled">

И соответственно где-то: 

<script>
  function activateSubmit(){
    var len = $('#some-textarea').val().split(" ").length;
    if(len >= 15){ //15 words, hardcoded, probably change this to maxwords, or whatever.
      $('#submit-button').removeAttr('disabled');
    }
    else{
      $('#submit-button').attr('disabled', 'disabled');
    }
  }
</script>
1 голос
/ 19 марта 2011

это пример с регулярным выражением: 

$('form#count').submit(function(){
    // if we accept that words are only made of letters
    if ($(this).find('textarea').val().match(/[a-z]+/gi).length < 15) {
        // add some error message
        return false; // prevents submitting
    }
});
...