验证检查带有单个提交按钮的动态文本框

Posted 2023-05-09

【中文标题】验证检查带有单个提交按钮的动态文本框

【英文标题】：Validation Check for dynamic textbox with individual submit button

【发布时间】：2017-12-21 13:18:42

【问题描述】：

我正在尝试创建如下图所示的内容。 Each section is dynamically generated using simple-form

每次单击按钮保存时，都需要验证文本字段（检查它是否为整数），向控制器发送 ajax 并且不重定向到任何页面。 我编写的代码只能检查第一个字段，但无法检查其余字段。如何使每个按钮仅检查/提交相应文本框的 ajax？ 这是我的代码

- @students.each do |student|
  .same-category
    .collapsible-container
      .collapsible-head
        .wrap
          .index
            h1 = student.register_no
          .name
            h3 = student.name
          .grade
            h1 U
            h5 x20.21
          .arrow
            #arrow-toggle =image_tag('arrow.svg', class: ['arrow-down', 'test'])

        .collapsible-body
          .wrap-content
            .station-grade A: <12.01s
            .station-grade B: 12.01 - 13.11
            .station-grade C: 13.11 - 14.11
            .station-grade D: 14.21 - 15.11
            .station-grade E: 15.31 - 16.51

          .score-input
            = f.input '#', label: false, wrapper: false, input_html:  class: ['result-entry-textbox'], value: @station_score 
            button#result-entry-save.result-save-button SAVE

jQuery

$('#result-entry-save').click(function() 
    var checkIsNum = /^\d+$/.test('#result-entry-textbox');
    if(isNaN(checkIsNum)) 
      alert('not num');
     else 
      alert('is num');
  
);

【问题讨论】：

尝试对按钮和文本框使用类而不是 id 并将选择器更改为 JS 中的类

是的，我同意@Pavan，因为您有多个按钮，因此您需要在视图中提及类，因为如果您在 JS 中使用 id 作为选择器，它将使用 id 搜索/查找第一个条目只有，

@pavan 谢谢！

@DivyaSharma 谢谢！

【参考方案1】：

像下面这样：-

$('#result-entry-save').click(function() 
    $('input[type="textbox"]').each(function() 
        var checkIsNum = /^\d+$/.test($(this));
        if(isNaN(checkIsNum)) 
          alert('not num');
         else 
          alert('is num');
        
    );
);

或者您可以将公共类添加到要检查的输入框中，然后执行以下操作：-

$('#result-entry-save').click(function() 
    $('.common-class-name').each(function() 
        var checkIsNum = /^\d+$/.test($(this));
        if(isNaN(checkIsNum)) 
          alert('not num');
         else 
          alert('is num');
        
  );
);

注意：- 除了显示多个警报，您可以在单个警报中执行，如下所示：-

$('#result-entry-save').click(function() 
    var checkval = true;
    $('input[type="textbox"]').each(function() 
        var checkIsNum = /^\d+$/.test($(this));
        if(isNaN(checkIsNum)) 
           checkval = false;
         else 
          checkval = true;
        
    );
    if(checkval == false)
        alert("some input fields have non-integer value.Check and correct!");return false;
    
);

【讨论】：

谢谢！这帮助很大！

@Daniel 很高兴为您提供帮助 :):)