Jquery验证插件在与<发件人:form>标签

Jquery validation plugin not displaying messages when used with <from:form> tag?

本文关键字:form gt 标签 验证 lt Jquery 插件      更新时间:2023-09-26

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

<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>标签不兼容

请替换您的表单标签,在<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/