文本区域验证中的最小长度

Question

I have a problem with my script. It is only partly working. If i enter less then 15 charachters the alert appears but then i click ok on the alert massage and the from gets send anyway. I am not sure waht i'm doing wrong. Here is my script:

function checktextarea() {
var minLength = 15;
var $textarea = $('#massage');
if($textarea.text().split(/\s+/).length < minLength) {
  alert('You need to enter at least ' + minLength + ' words');
    return false;
 }
}

This is the html:

<form action="kontaktsi.php" name="myForm" id="myForm" method="post" class="contact_form" onsubmit="checktextarea()">
 <span class="sporo">
  <input type="text" id="fname" name="fname" class="contacttextform form-control" placeholder="Name" required>
 </span>
 <input type="email" id="email" name="email" class="contacttextform" placeholder="Your email" required><br><br>
 <textarea name="message" id="message" cols="8" rows="8" class="contacttextarea" placeholder="text text text?" required></textarea>
 <br>
 <div class="send">
  <input name="send" type="submit" class="contactformbutton" style="width:150px;" value="Send">
 </div>
</form>

Answer 1

change your <form> tag into this:

<form action="kontaktsi.php" ... method="post" onsubmit="return checktextarea()">

You need to add return to the call, in order to pass the boolean value false to the submit event.

There's also a typo in your script: change $('#massage') into $('#message') Finally, you need to use val() instead of text() to get the value of a <textarea> . Here's the final script:

function checktextarea() {
    var minLength = 15;
    var textarea = $('#message');
    if(textarea.val().replace(' ') < minLength) {
        alert('You need to enter at least ' + minLength + ' words');
        return false;
    }
    return true;
}

Answer 2

I am not 100% sure if it is the only way, but the last time I solved this problem I avoided the generic onsubmit mechanism; precisely because of the missing way of breaking in case of error.

Instead, one can bind a jQuery submit event and then use preventDefault() in case of error, as described here:

http://api.jquery.com/submit/

One can even submit directly with jQuery: Submit a form using jQuery

It is slightly more work, but you have much better control.

Answer 3

try this

function checktextarea() {
  var minLength = 15;
  var $textarea = $('#massage');
  if($textarea.val().split(' ').length < minLength) {
    alert('You need to enter at least ' + minLength + ' words');
    return false;
  }
}