如何验证动态生成的字段不为空？答案

【问题标题】：How can I validate that dynamically generated fields are not empty?如何验证动态生成的字段不为空？
【发布时间】：2020-03-13 15:09:25
【问题描述】：

我正在使用经典的 asp 开发引导环境。我有一个动态生成的输入字段

<input type="number" size="5" name="montantafacturer_<%=irs("INSPECTIONID")%>">
<button onclick="_EVENTSPARAM('events_ajouteralafacturation','<%=irs("INSPECTIONID")%>');">add</button>

一页上最多可以有 100 个动态生成的字段。

基础是我应该用数值填充字段 montantafacturer_ 并单击添加以在回发方法中将值插入数据库中

我想知道我是否可以插入一个 javascript 代码来检查我的字段是否已填充，而不是从回发响应中获取字段为空的错误...以获得时间

即：

<input type="number" size="5" name="montantafacturer_<%=irs("INSPECTIONID")%>">
<button onclick="**IF montantafacturer_<%=irs("INSPECTIONID")%>" IS NOT EMPTY THEN** _EVENTSPARAM('events_ajouteralafacturation','<%=irs("INSPECTIONID")%>');">add</button>

我想知道这是否可以通过内联 javascript 来完成。

请告知如何。

【问题讨论】：

您能否展示一下您如何生成输入的代码？
也许只需添加 required 道具
我不能添加 required="" 否则所有字段都成为必需的，这不是我想要的。
我在一个循环中做 while not rs.eof ..... 循环。 rs.movenext

标签： javascript bootstrap-4 asp-classic

【解决方案1】：

iid = irs("INSPECTIONID")
if iid <> "" then %>    
<input type="number" size="5" name="montantafacturer_<%=iid%>">
 <button onclick="_EVENTSPARAM('events_ajouteralafacturation','<%=iid%>');">add</button>
<$ end if %>

这样，如果您的记录集为空，则不会输出 HTML。如果将 IF/THEN 移动到 Button 标记之前，则不会为空值创建任何按钮。

【讨论】：

【解决方案2】：

首先，欢迎来到 StackOverflow

其次......当我停止使用 Classic ASP 时（超过 15 年前）已经很长时间了，很高兴看到他仍然有一个小地方:)

最后但并非最不重要的......你的问题

因为你有输入和按钮，我相信你有一个 for 循环，我会假设你有一个 <form> 包装所有输入和按钮的标签

为了完成你想要做的事情，并利用更好的代码技术，我很可能会得到一些结果（假设你可以使用 jQuery 来提升一些 javascript...让我知道如果你不能，我会重写没有它）


<form action="/yourpage.asp" method="POST">
<table class="table">
  <tbody>

<% For ... %>

    <tr class="tr-<%=irs("INSPECTIONID")%>">
      <td>
        <input 
          type="number" 
          size="5" 
          id="montantafacturer_<%=irs("INSPECTIONID")%>"
          name="montantafacturer_<%=irs("INSPECTIONID")%>">
      </td>
      <td>
        <button
          class="btn"
          data-event="events_ajouteralafacturation"
          data-input="<%=irs("INSPECTIONID")%>"
        >add</button>
      </td>
    </tr>

<% Next %>

  </tbody>
</table>
</form>

<script>
    $(function() {
        // for every button with class "btn", fire "onButtonClick" fn upon click
        $(".btn").on("click", onButtonClick);
    });

    function onButtonClick(evt) {
        evt.preventDefault();

        var btn = $(evt.currentTarget); // the clicked button
        var btnEvent = btn.data("event");
        var btnInput = btn.data("input");

        // your logic
        var input = $("#montantafacturer_" + btnInput).val();
        if(input.length === 0) {
            // show the error in any way you prefer
            return;
        }

        // if we reach here, we have data in the input
        _EVENTSPARAM(btnEvent, btnInput);

        // you can now fire some code to submit the form
        // or just this value, or even disable the button while it
        // is being used to send the data (prevent double click), etc.
    }
</script>

<tr class="tr-<%=irs("INSPECTIONID")%>"> 是我当时使用的一种技术，因此我可以添加一个类，该类将用另一种颜色标记该行，以向用户提供一些反馈，例如该行数据正在发生某些事情

$(".tr-" + btnInput).addClass("updating");

我还在输入中添加了id 以使用$("#...") 而不是按名称搜索

【讨论】：

抱歉耽搁了，我想我们都在与 covid19 病毒一起度过艰难的时刻。希望我们重新开始工作。我测试了您的代码，除了错误警报外，它运行良好。如果未填写该字段，则添加按钮似乎已禁用，并且没有出现 jquery 错误。我想在字段为空的情况下单击添加时添加错误警报。谢谢
@CloudVGP 只需在// your logic 上方添加一行debugger 文本并检查您拥有的值，以及input 变量中的值是否正确，这样您就知道您是否会进入那if

【解决方案3】：

关于使用 JS 内联的小吐槽

你为什么会使用内联 JS？它确实不实用或不可读 - 强烈建议将其移至外部源。

如何使用JS内联（请不要）

但是，如果您绝对没有办法，您总是可以将所有正常的 JS 代码放入一个内联事件中，例如 onclick。

<button onclick="
    // this makes me sad
    const allInputs = document.querySelectorAll('[name^=montantafacturer_]');
    allInputs.forEach(input => {
        if (input.value.length > 0 && !isNaN(input.value)) {
            // number
        } else {
            // empty / Not a Number
        }
    });
">

add
</button>

这就是你要找的东西。

提及

真的，不要使用内联JS
正如另一位用户所指出的 - 您可能希望使用 HTML 属性 required

【讨论】：