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

Question

Situation : i have the following form in a jSP page that uses jquery validation plugin from 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"/>

and the script to validate form is as follows :

<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();
        }
});

Problem : The above form carries validation and displays error messages .

But when i try to use <form:from> instead of <form> tag the validation occurs , i even see a red border in my input field

but the custom error messages are not displayed , following is my current 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>

I can't seem to understand why the messages are not bieng displayed , is Jquery validation plugin incompatible with <form:form> tag

Answer 1

Please replace your form tag, there is a typo <form:from to <form:form

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

to

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

Working fiddle - https://jsfiddle.net/3sncybnw/