0

我有一个带有作业模型的 Rails 应用程序，在索引页面上，每个作业都有一个表单。每次选择提交按钮时，我都需要能够访问特定的表单，因此我可以获取表单的输入并使用它执行一些 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();似乎总是空的，无论我是否在正文中放入任何东西。我认为这与以下事实有关，因为每个工作都有相同的表格，#message_body同一页面上有多个 id，它选择了不正确的一个。我是 jQuery 和 javascript 的新手，有人可以帮我吗

4

2 回答 2

1

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

在您的情况下，简单class="message_body"地设置您的元素并选择它们，如下所示：

$('.message-button').click(function(e) {
    var id = $(this).data('job-id');
    var body = $(this).parent().find('.message_body').val();
    messageValidation(e, body, id);
});
于 2013-06-05T19:20:47.410 回答
0

为了解决这个问题，我需要选择表单的孩子并通过它找到 message_body。

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

};
于 2013-06-05T21:20:42.547 回答