Question

情况：我在使用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>标签不兼容

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

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

1 个答案: