JSP表单提交报错Uncaught ReferenceError: validateProduct未定义求助

问题 #

在JSP页面的表单中编写了JavaScript脚本，提交表单时控制台抛出错误：Uncaught ReferenceError: validateProduct is not defined at HTMLFormElement.onsubmit。JS文件中的其他函数均可正常运行，仅validateProduct()函数无法被识别。

相关代码片段如下：

JS文件（gestione.js） #

function css(errore){
    errore.style.textAlign="center";
    errore.style.padding="4% 0 0 2%";
    errore.style.backgroundColor="#fcdde8";
    errore.style.fontFamily="Roboto";
    errore.style.height="35px";
    errore.style.outlineWidth="3px";
    errore.style.outlineColor="#663344";
    errore.style.outlineStyle="solid";
    errore.style.fontSize="15px";
}

$(function(){
    $('#insert').click(
        function(){
        $('#ins').slideToggle('slow');
        });
})

$(function(){
    $('#remove').click(
        function(){
        $('#rem').slideToggle('slow');
        });
})

$(function(){
    $('#modifica').click(
        function(){
        $('#mod').slideToggle('slow');
        });
})

$(function(){
    $('#ordini').click(
        function(){
        $('#scegli1').slideToggle('slow');
        $('#scegli2').slideToggle('slow');
        });
})

$(function(){
    $('#scegli1').click(
        function(){
        $('#oUt').slideToggle('slow');
        });
})

$(function(){
    $('#scegli2').click(
        function(){
        $('#oDate').slideToggle('slow');
        });
})

function validateProduct(){
    var nome=document.getElementById("nome");
    var descrizione=document.getElementById("descrizione");
    var prezzo=document.getElementById("prezzo");
    var errore=document.getElementById("error");
    
    if(nome.value.length<1 || nome.value.length>100){
        css(errore);
        errore.innerHTML="<b>ERRORE:</b>Inserisci nome correttamente!";
        console.log("Sono caduto in errore nome");
        return false;
    }
    
    if(descrizione.value.length>300){
        css(errore);
        errore.innerHTML="<b>ERRORE:</b>Inserisci descrizione correttamente!";
        console.log("Sono caduto in errore descrizione");
        return false;
    }
    
    if(prezzo.value < 0.01){
        css(errore);
        errore.innerHTML="<b>ERRORE:</b>Inserisci prezzo correttamente!";
        console.log("Sono caduto in errore prezzo");
        return false;
    }
    return true;
}

JSP页面片段 #

<body>
    <script src="${pageContext.request.contextPath}/gestione/gestione.js"></script>
<!-- ... 其他页面内容 ... -->
<form action="InserisciProdotto" class="ins" id="ins" onSubmit="return validateProduct();">
<!-- ... 表单内容 ... -->
    </form>
</body>

解决方案 #

1. 确认脚本加载状态与路径 #

• 打开浏览器控制台的Network标签，检查gestione.js是否成功加载（HTTP状态码为200）。如果路径错误或文件不存在，脚本未加载会导致函数无法找到。
• 在控制台执行console.log(validateProduct)，若返回undefined，说明函数未被正确解析或加载。

2. 调整脚本加载顺序 #

将JS脚本移到</body>标签前，确保DOM元素和表单都已加载完成后再加载脚本，避免表单调用函数时脚本还未执行：

<body>
<!-- ... 页面内容与表单 ... -->
<form action="InserisciProdotto" class="ins" id="ins" onSubmit="return validateProduct();">
<!-- ... 表单内容 ... -->
    </form>
    <script src="${pageContext.request.contextPath}/gestione/gestione.js"></script>
</body>

3. 改用jQuery绑定提交事件（推荐） #

放弃onsubmit属性，通过jQuery绑定表单提交事件，避免全局作用域问题，同时确保函数在DOM就绪后可用：
在JS文件末尾添加以下代码：

$(function(){
    $('#ins').submit(function(event){
        if(!validateProduct()){
            event.preventDefault(); // 验证失败时阻止表单提交
        }
    });
})

然后修改表单，移除onSubmit属性：

<form action="InserisciProdotto" class="ins" id="ins">

4. 检查语法错误 #

检查validateProduct函数前后的代码是否存在未闭合的括号、引号等语法问题，语法错误会导致后续代码无法解析，函数也就无法被注册到全局作用域。从提供的代码看，前面的$(function(){})都已正确闭合，可重点检查函数内部的变量、条件语句是否有语法问题。

内容的提问来源于stack exchange，提问作者Giovanni Cascone