title: How to submit a form in thymeleaf and spring boot with some client side validation of javascript?
body: <p>How to submit a form in thymeleaf and spring boot with some client side validation in javascript ,if validation fail form doest not get submitted else request goes to controller?</p>
  
  <p>In below code ,how can i check if first number is greater than secondnumber 
  in javascript then only form got submitted to Controller else validation error occur and form doesnot get submitted.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"&gt;
      &lt;head&gt;
          &lt;title&gt;Calculation &lt;/title&gt;
      &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Subtraction&lt;/h1&gt;
    &lt;form action="#" id="myform" th:action="@{/result}" th:object="${subtraction}" method="POST"&gt;
     &lt;table&gt;
     &lt;tr&gt;
     
         &lt;td/&gt;First Number :&lt;/td&gt;
      &lt;td&gt;
     &lt;input type="text" id="firstno" th:field="*{firstnumber}" /&gt;     
     &lt;/td&gt;    
    &lt;/tr&gt;
     
     &lt;tr&gt;&lt;td&gt;Second Number :&lt;/td&gt;
       &lt;td&gt;
        &lt;input type="text" id="secondno" th:field="*{secondnumber}" /&gt;   
       &lt;/td&gt;
       &lt;/tr&gt;     
        &lt;tr&gt;&lt;/tr&gt;
        &lt;tr&gt;&lt;td colspan="2"&gt;
                 &lt;input type="submit" value="Submit"/&gt; 
                 &lt;input type="reset" th:value="Reset"/&gt;
               &lt;/td&gt;
           &lt;/tr&gt;
       
  &lt;/table&gt;  
   &lt;/form&gt;
   
   
   &lt;script th:inline="javascript"&gt;
  
     var a=/*[[${subtraction.firstnumber}]]*/;
   var b=/*[[${subtraction.secondnumber}]]*/;
  
  function isValid(form){
    if(a&gt;b)
      return true;
    else
      return false;
  }
  
   $('#myform').submit(function(e){                                   
                      e.preventDefault();
                     if( isValid($(this))){                           
                      $.ajax({
                          type: 'post',
                           url: /*[[ @{'/result'} ]]*/,
                            data:  $form.serialize(),
                            success: function(returnedData){
                                console.log(returnedData);                      
                              },    
  
                              error: function(xhr, exception) {
  
                                  }
                      }); 
                     }
                     else{
                         alert("Validation failed");
                     }
                  });
  &lt;/script&gt;
   
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>