与 <from:form> 标签一起使用时，Jquery 验证插件不显示消息？

Posted 2023-05-09

【中文标题】与 <from:form> 标签一起使用时，Jquery 验证插件不显示消息？

【英文标题】：Jquery validation plugin not displaying messages when used with <from:form> tag?

【发布时间】：2016-08-10 00:48:14

【问题描述】：

情况： 我在使用来自https://jqueryvalidation.org/ 的 jquery 验证插件的 jSP 页面中有以下表单 ：

<form id = "form1" class="form-inline" method = "post" enctype="multipart/form-data">

        <fieldset>
        <legend id="searchHeader"><spring:message code="add.details.header"/></legend>  
        </fieldset>

        <div class="inputDiv" >
            <div class="formRow">
                <div class="LabelDiv"><label class="inputLabel">Name<span class="asterix">*</span>: </label></div>
                  <div class="inputElement">                    
                      <input    name="proName" id="proName"  class="required">                      
                   </div>
            </div>          
        </div>      

   <input type="button" id = "forwardButton" value="Next"/>

验证表单的脚本如下：

<script>
$(function()
    $("#form1").validate(
         rules: 
             proName: "required"            
        ,
        messages: 
            proName: "This field is empty"

        
    );
);

$("#forwardButton").click(function() 
        $("#form1").attr("action", "/target");
        if($("#form1").valid())
            $("#form1").submit();
        
);

问题：上面的表单带有验证并显示错误信息。

但是当我尝试使用 <form:from> 而不是 <form> 标记时，会发生验证，我什至在我的输入字段中看到一个红色边框

但是没有显示自定义的错误信息，下面是我目前的表单：

<form:from id = "form1" class="form-inline" method = "post" enctype="multipart/form-data" modelAttribute="model"> 

        <fieldset>
        <legend id="searchHeader"><spring:message code="add.details.header"/></legend>  
        </fieldset>

        <div class="inputDiv" >
            <div class="formRow">
                <div class="LabelDiv"><label class="inputLabel">Name<span class="asterix">*</span>: </label></div>
                  <div class="inputElement">                    
                      <form:input name="proName" id="proName" path="dto.name" class="required"></form:input>                        
                   </div>
            </div>          
        </div>      

   <form:input type="button" id = "forwardButton" value="Next"></form:input>

我似乎无法理解为什么没有显示消息，是 Jquery 验证插件与<form:form> 标记不兼容

【问题讨论】：

Jquery 只关心生成的 html。为什么表单动作是在点击而不是之前添加的？您确定$("#form1").valid() 正在调用您之前编写的validate() 函数吗？

查看文档，似乎valid() 检查表单是否已经过验证。但是，验证本身必须使用validate() 完成。你应该试试这个$("#forwardButton").click(function() $("#form1").validate( ... ); if($("#form1").valid()) ...

试过不行，是jquery验证插件与

我不这么认为。 <form:form> 不只是一个服务器端语法，它将被呈现为一个简单的 html <form> 吗？此外，您的代码示例中可能存在拼写错误，<form:from 请检查。

已经检查过，不是错字，我的原始代码是正确的，但是一旦我将表单更改为表单：表单我的错误消息不显示

【参考方案1】：

请替换您的表单标签，<form:from 到 <form:form 有错别字

<form:from id = "form1" class="form-inline" method = "post" enctype="multipart/form-data" modelAttribute="model"> 

到

<form:form id = "form1" class="form-inline" method = "post" enctype="multipart/form-data" modelAttribute="model"> 

工作小提琴 - https://jsfiddle.net/3sncybnw/

【讨论】：

这是一个错字我的原始代码是正确的，我很确定该插件与

我在我的项目中使用了