Javascript Rails和jQuery：如何从特定表单中选择输入

我有一个带有工作模型的rails应用程序，在索引页面上，每个工作都有一个表单。每次选择submit按钮时，我都需要能够访问特定的表单，这样我就可以获取表单的输入并使用它执行一些jQuery验证

这是我的index.html页面的一些内容

<ul>
  <% @unassigned.each do |job| %>
    <li>
            <div class="row new-message">
              <div class="small-12 columns">
                  <%= form_for @message do |f| %>
                    <%= f.text_area :body, {placeholder: 'enter a new message...'} %>
                    <%= f.hidden_field :job_id, value: job.id %>
                    <%= f.submit 'send message', class: 'button small radius secondary message-button', "data-job-id" => job.id %>
                    <div id="message<%= i %>-validation-errors"> </div>
                  <% end %>
              </div>
            </div>
    <li>
  <% end %>
<ul>

这里是javascript/jQuery，我尝试从特定表单中选择输入

var messages;

messages = function() {

    $('.message-button').click(function(e) {
        var id = $(this).data('job-id');
        messageValidation(e, id);
    });

    function messageValidation(e, id) {
        var body = $('#message_body').val();
        var div = '#message' + id + '-validation-errors';
    if(body == "") {
      $(div).html('');
      e.preventDefault();
      $(div).html('<small style="color:red"> Message body empty </small>');
    }
    };

};

$(document).ready(messages);

---

索引页面将为每个作业提供一个表单，我希望有前端验证，在提交按钮时检查body字段是否为空。它第一次工作正常，但在返回到索引页并尝试第二次验证var body=$'message_body'.val；无论我把什么东西放在身体里与否，总是显得空荡荡的。我相信这与以下事实有关：由于每个作业都有相同的表单，因此在同一页面上有多个消息体id，并且选择了错误的消息体id。我不熟悉jQuery和javascript，有人能帮我一下吗？

一个页面上不能有多个id相同的元素。您可以做的是向这些元素添加一个类标识符

在您的情况下，简单地将class=message\u body设置为您的元素并选择它们，如下所示：

$('.message-button').click(function(e) {
    var id = $(this).data('job-id');
    var body = $(this).parent().find('.message_body').val();
    messageValidation(e, body, id);
});

---

为了解决这个问题，我需要选择表单的子级并通过它找到消息体

messages = function() {

    $('.new_message').submit(function(e) {
        //var id = $(this).data('job-id');
        var $this = $(this);
        var body = $this.children('#message_body').val();
        var id = $this.children('#message_job_id').val();
        messageValidation(e, body, id);
    });

    function messageValidation(e, body, id) {
        var div = '#message' + id + '-validation-errors';
    if(body == "") {
      $(div).html('');
      e.preventDefault();
      $(div).html('<small style="color:red"> Message body empty </small>');
    }
    };

};

---

我在当前解决方案之前尝试过这个方法，它确实选择了一个表单，但它总是选择第一个表单。它只会选择包含正在单击的按钮的表单。每当我尝试这个方法时，我会将var id=$'message\u job\u id'.val；在messageValidation方法中，无论哪个表单提交，id总是显示为“1”，但我单击我相信会发生这种情况，因为页面上有许多“message\u job\u id”id，每次运行时它都会选择它看到的第一个id。是否有方法从单击的特定表单中选择正确的输入$'message\u job\u id'将始终选择与选择器message\u job\u id匹配的第一个元素。因此，不要一般使用选择器。相对于正在单击的按钮使用它。