How to submit a form in thymeleaf and spring boot with some client side validation of javascript?
Question
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?
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.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <title>Calculation </title> </head> <body> <h1>Subtraction</h1> <form action="#" id="myform" th:action="@{/result}" th:object="${subtraction}" method="POST"> <table> <tr> <td/>First Number :</td> <td> <input type="text" id="firstno" th:field="*{firstnumber}" /> </td> </tr> <tr><td>Second Number :</td> <td> <input type="text" id="secondno" th:field="*{secondnumber}" /> </td> </tr> <tr></tr> <tr><td colspan="2"> <input type="submit" value="Submit"/> <input type="reset" th:value="Reset"/> </td> </tr> </table> </form> <script th:inline="javascript"> var a=/*[[${subtraction.firstnumber}]]*/; var b=/*[[${subtraction.secondnumber}]]*/; function isValid(form){ if(a>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"); } }); </script> </body> </html>
2 answers
solution1
0 2019-01-23 06:08:18
You can use javascript/ajax for this. like below
<script th:inline="javascript">
function isValid(form){
if(condition)
return true;
else
return false;
}
$('#myform ').submit(function(e){
e.preventDefault();
if( isValid($(this))){
$.ajax({
type: 'post',
url: /*[[ @{'/url'} ]]*/,
data: $form.serialize(),
success: function(returnedData){
console.log(returnedData);
},
error: function(xhr, exception) {
}
});
}
else{
alert("Validation failed");
}
});
</script>
solution2
0 ACCPTED 2019-01-30 18:46:39
After lot of retries, i found the solution myself
<script th:inline="javascript"> $('#myform').submit(function(e){ var a=parseInt($('#firstno').val(),10); console.log(a); var b=parseInt($('#secondno').val(),10); console.log(b); if(a>b){ $.ajax({ type: 'post', url: "/result.html", data: $('#myform').serialize(), success: function(returnedData){ console.log("Success"); alert("success") }, error: function(xhr, exception) { console.log(exception); } }); } else{ alert("Validation failed"); e.preventDefault(); } }); </script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Javascript + Spring Boot + Thymeleaf - form validation
Prevent reload after form submit with Thymeleaf fragments, Ajax and Spring boot
Using JavaScript Spring MVC Client Side Validation
Client-side form validation with javascript
Simple Javascript client-side form validation
POST a JavaScript array of Strings into Spring Boot/Thymeleaf form Object
How can I submit a html form for server-side validation after successful client-side validation with jQuery?
Submit form via AJAX but keep client side validation
client-side form validation after clicking SUBMIT
Client-side validation THEN pass to server OR disable submit until form complete - How do I do this?
Related Tags