Twitter wie Zähler

Question

Bibliothek/Framework verwendet = Jquery + Bootstrap 4 Ich möchte einen twitter wie Zähler, aber mit zwei Eingabefelder, wenn die 2 Eingabe gültig sind, dann post. Das ist mein Code bisher.

$('.new_post_title').keyup(function() { 
 
    var max_character = 15; 
 
    var length_ = $(this).val().length; 
 

 
    if (length_ > max_character) { 
 
    $(".new_post_title_count").css('color', 'red'); 
 
    var character = length_; 
 
    $('.new_post_title_count').text(character); 
 
    $('.new_post_button').prop('disabled', true); 
 
    } else { 
 
    $(".new_post_title_count").css('color', 'black'); 
 
    var character = max_character - length_; 
 
    $('.new_post_title_count').text(character); 
 
    $('.new_post_button').prop('disabled', false); 
 
    } 
 
}); 
 

 
$('.new_post_content').keyup(function() { 
 
    var max_character = 10; 
 
    var length_ = $(this).val().length; 
 

 
    if (length_ > max_character) { 
 
    $(".new_post_content_count").css('color', 'red'); 
 
    var character = length_; 
 
    $('.new_post_content_count').text(character); 
 
    $('.new_post_button').prop('disabled', true); 
 
    } else { 
 
    $(".new_post_content_count").css('color', 'black'); 
 
    var character = max_character - length_; 
 
    $('.new_post_content_count').text(character); 
 
    $('.new_post_button').prop('disabled', false); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="modal fade" id="new_post_modal" tabindex="-1" role="dialog" aria-labelledby="new_post_modalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     <form> 
 
      <div class="form-group"> 
 
      <label class="form-control-label">Title (Optional)</label> 
 
      <input type="text" class="form-control new_post_title" placeholder="Make a title..."> 
 
      <span class="new_post_title_count"></span> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="form-control-label">Content</label> 
 
      <input type="text" class="form-control new_post_content" placeholder="Publish something..."> 
 
      <span class="new_post_content_count"></span> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="form-control-label">Image</label> 
 
      <input type="file" class="form-control-file"> 
 
      </div> 
 
      <button class="btn btn-primary new_post_button">Post</button> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Das Problem ist, wenn ich diesen Code Trick, den ich die Post ohne Validierung es machen kann, für den ersten Eingang i 20 Zeichen setzen und für die zweite legte i 10 Zeichen und die Taste ist aktiviert.

Answer 1

Sie benötigen eine separate Prüfung zum Aktivieren/Deaktivieren der Schaltfläche, bei der Sie auch berücksichtigen, ob das andere Feld gültig ist. Beide müssen gültig sein für die Taste zu zeigen, aber in Ihrem Code, den Sie nur das Feld überprüfen, die Sie gerade eingeben.

var titleLength = 0; 
 
var titleMaxLength = 15; 
 
var contentLength = 0; 
 
var contentMaxLength = 10; 
 

 
$('.new_post_title').keyup(function() { 
 
    titleLength = $(this).val().length; 
 
    if (titleLength > titleMaxLength) { 
 
    $(".new_post_title_count").css('color','red'); 
 
    var character = titleLength; 
 
    $('.new_post_title_count').text(character); 
 
    } 
 
    else { 
 
    $(".new_post_title_count").css('color','black'); 
 
    var character = titleMaxLength - titleLength; 
 
    $('.new_post_title_count').text(character); 
 
    } 
 
    if (titleLength > titleMaxLength || contentLength > contentMaxLength) { 
 
    $('.new_post_button').prop('disabled', true); 
 
    } 
 
    else { 
 
    $('.new_post_button').prop('disabled', false); 
 
    } 
 
}); 
 

 
$('.new_post_content').keyup(function() { 
 
    contentLength = $(this).val().length; 
 
    if (contentLength > contentMaxLength) { 
 
    $(".new_post_content_count").css('color','red'); 
 
    var character = contentLength; 
 
    $('.new_post_content_count').text(character); 
 
    } 
 
    else { 
 
    $(".new_post_content_count").css('color','black'); 
 
    var character = contentMaxLength - contentLength; 
 
    $('.new_post_content_count').text(character); 
 
    } 
 
    if (titleLength > titleMaxLength || contentLength > contentMaxLength) { 
 
    $('.new_post_button').prop('disabled', true); 
 
    } 
 
    else { 
 
    $('.new_post_button').prop('disabled', false); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="modal fade" id="new_post_modal" tabindex="-1" role="dialog" aria-labelledby="new_post_modalLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-body"> 
 
     <form> 
 
      <div class="form-group"> 
 
      <label class="form-control-label">Title (Optional)</label> 
 
      <input type="text" class="form-control new_post_title" placeholder="Make a title..."> 
 
      <span class="new_post_title_count"></span> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="form-control-label">Content</label> 
 
      <input type="text" class="form-control new_post_content" placeholder="Publish something..."> 
 
      <span class="new_post_content_count"></span> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="form-control-label">Image</label> 
 
      <input type="file" class="form-control-file"> 
 
      </div> 
 
      <button class="btn btn-primary new_post_button">Post</button> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>