JavaScript 表单验证“值”未从表单 onsubmit 事件传递

Posted 2023-05-09

【中文标题】JavaScript 表单验证“值”未从表单 onsubmit 事件传递

【英文标题】：JavaScript form validation "value" not being passed from form onsubmit event

【发布时间】：2021-03-10 19:58:36

【问题描述】：

我有一个使用 jQuery 自动完成来填充输入的表单。为了防止用户输入前几个字母，然后假设字段已完成，我将合并一个 JS 表单验证，将输入与数组进行比较。比较工作正常，但由于某种原因，输入字段值colltown_name 未传递给表单验证。但是其他输入字段是。

我创建了一个测试环境，在出错时会显示在colltown_name 输入上提交的内容。

var x = document.forms["quoteRequest"]["colltown_name"].value; //returns: "Localhost says " , so it is receiving nothing

var x = document.forms["quoteRequest"]["colltown_name"].name; //returns: "Localhost says colltown_name " 

我不明白为什么 value 不返回任何验证，但 name 返回 name 值 如果我在谷歌浏览器上检查表单提交，绕过验证，colltown_name.value 被提交。 以下是我的表单和验证的 sn-ps：-

//var x = document.forms["quoteRequest"]["descr_goods"].value; //returns value "Goods"
//var x = document.forms["quoteRequest"]["colltown_name"].name; //returns name "colltown_name"
var x = document.forms["quoteRequest"]["colltown_name"].value;  //returns nothing
var arr=["AANDRUS, Bloemfontein", "AANHOU WEN, Stellenbosch", "ABBOTSDALE, Western Cape"];

function quoteValid()      //ADDED BY ADIEB                              
 
    if ($.inArray(x, arr) == -1)
    
        alert(x);
        return false;
    
    

<form name="quoteRequest" action="index.php?route=product/product" method="post" enctype="multipart/form-data" class="form-horizontal" onsubmit="return quoteValid()">
<div class="ui-widget">
  <input type="text" id="ctags" class="form-control col-md-8" autocomplete="off" placeholder="Start typing Collection Town" name="colltown_name">
    <input id="ctag" type="hidden" name="colltown">
                </div>
<input type="text" class="form-control col-md-6" id="desc" name="descr_goods" value="Goods" required>

【问题讨论】：

我不确定我是否完全理解你的问题，但这里的任何代码有帮助吗？ jsfiddle.net/natelegakis/ruwgoe95 我猜 prevenDefault 和/或 .focus 可能会有所帮助。或者，也许这可以在您的代码中的某处使用。 if ( e.keyCode == $.ui.keyCode.TAB) 看看这个小提琴。 jsfiddle.net/uymYJ/8

问题实际上是，当“onsubmit 事件被调用时，colltown_name 的值没有被传递给 validate 函数”，因此它无法评估输入是否有效。

【参考方案1】：

您的colltown_name 值似乎只在您的页面加载时定义一次。所以x 的值是undefined，当您将它传递给表单提交时的quoteValid 函数时，验证失败。

您必须在提交时获取更新后的字段值：

function quoteValid()  
    var x = document.forms['quoteRequest']['colltown_name'].value;
    if ($.inArray(x, arr) == -1) 
        alert(x);
        return false;
    

【讨论】：

var x = document.forms["quoteRequest"]["descr_goods"].value; //在提交时返回值“商品”。 colltown_name在页面加载时没有值，用户输入info提交，但是没有返回值？

提交时您必须获取更新后的字段值：- 不知道该怎么做？

1.那是因为“商品”的值在您的表单中是硬编码的。 2. 复制 var x = document.forms['quoteRequest']['colltown_name'].value;像上面那样进入 quoteValid() 函数。

谢谢TimonNetherlands - 它有效，我今天学到了一些东西......