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

Question

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

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

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

基础知识是我应该用数值填充字段 montantafacturer_<%=irs("INSPECTIONID")%>，然后单击“添加”以在回发方法中将值插入数据库

我想知道我是否可以插入一个 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。

请指教如何。

Answer 1

关于使用 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

Answer 2

首先，欢迎来到 Whosebug

其次...当我停止使用 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")%>"> 是我当时使用的一种技术，所以我可以添加一个 class 来用另一种颜色标记该行，以便向用户提供一些反馈，告诉他们发生了什么该行数据，例如

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

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

Answer 3

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 标记之前，则不会为空值创建任何按钮。

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

How can I validate that dynamically generated fields are not empty?

javascript

asp-classic

bootstrap-4

关于使用 JS 内联的小吐槽

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

提及