JavaScript 表单验证 "value" 未从表单提交事件传递

Question

我有一个表单使用 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 "

我不明白为什么值 returns 没有验证，但名称 returns 名称值如果我在 Google Chrome 检查表单提交，绕过验证， colltown_name.value 被提交。以下是我的表单和验证的片段：-

//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>

Answer 1

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

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

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

JavaScript 表单验证 "value" 未从表单提交事件传递

JavaScript form validation "value" not being passed from form onsubmit event

html

javascript

validation

jquery

jquery-ui-autocomplete