javascript word count form validations - Stack Overflow|江阴雨辰互联

I have been trying everything to try and solve this myself, but cannot find any solutions on google or my beginner php skills are not up to the task. So please can someone show me how I can make the form submit ONLY if people have written 15 words or more. Any suggestions would be very much appreciated. Below is the css, javascript and 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" ".dtd">
<html xmlns="">
<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=".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>

#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/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3/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./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>

Share Improve this question edited Mar 19, 2011 at 20:16 asked Mar 19, 2011 at 20:03 mike 131 silver badge4 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

Off the top of my head, something like this?

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

And correspondingly somewhere:

<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>

this is an example with a regular expression:

$('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
    }
});

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745468510a4629023.html

javascript word count form validations - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript word count form validations - Stack Overflow

2 Answers 2

相关推荐