Question

我有一个允许用户发表评论的表单。这是我的提交行动：

 <%= semantic_form_for([@project, step, step.comment_threads.build]) do |f| %>
    <%= f.text_area :body %>
    <%= f.actions do %>
         <%= f.action :submit, :label=>"Comment", :button_html => {:class=> "btn btn-small btn-primary commentSubmit", :disable_with => "Comment"} %>
    <% end %>
<% end %>

如果用户尝试提交空注释，我会禁用表单提交。但是，在用户在评论框中输入文本后，我无法重新启用它。（当我单击评论按钮时，表单未提交）。这是我的javascript：

$('.commentSubmit').click(function(){
  var comment = $(this).parents('form').children('.field').find('textarea').val();
  console.log('comment: ' + comment);
  if(comment.length == 0){
    alert('Cannot post an empty comment');
    $(this).parents('form').submit(false);
  }else{
    console.log('submitting form');
    $(this).parents('form').submit();
  }     

});

Answer 1

为keyup添加侦听器，而不是在单击时验证。

将提交按钮设置为disabled = true，然后添加：

$('textarea').on('keyup', function(event){
  if event.target.val().length > 0 {
    $('.commentSubmit').attr('disabled', false);
  } else {
    $('.commentSubmit').attr('disabled', true);
  }
});

这有额外的好处，就是在删除评论时重新禁用。

Answer 2

如果用户尝试提交带有空注释的表单，我最终会做的是返回false。它对我来说很完美！

$('form.comment').submit(function(){
  var comment = $(this).children('.field').find('textarea').val();
  if(comment.length == 0){
    alert('Cannot post an empty comment');
    return false;
  }else{
    $(this).find('.commentSubmit').attr('disabled', true);
  }
});

Answer 3

一旦文本在框中，您将需要使用keyup（或其他一些侦听器）来启用按钮。

请参阅：jQuery disable/enable submit button或jQuery enable/disble button depending on input field empty or not

在Rails中使用JQuery禁用和重新启用表单提交

3 个答案: