I'm using Spring MVC with Get & Post Mapping & also Thymeleaf on my HTML & I'm trying to make form validation but with JQuery. Right now I'm testing the validation with just the Store Name field first before the rest.
Here's my HTML:
<html xmlns:th="https://www.thymeleaf.org"
th:replace="~{fragments/layout :: layout (~{::body},'salesChannel')}">
<body>
<div class="page-title">
<div class="title_left">
<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="row page-titles">
<div class="col-md-12 col-sm-12 col-xs-12 align-self-center">
<ol class="breadcrumb">
<li class="breadcrumb-item">Configuration</li>
<li class="breadcrumb-item"><a th:href="@{/config}">Sales Channel</a></li>
<li class="breadcrumb-item">Rules Setting</li>
<li class="breadcrumb-item active">Create</li>
</ol>
</div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-3 col-sm- col-xs-3"></div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="x_panel">
<div class="x_title">
<h2>Create a New Store Code</h2>
<div class="clearfix"></div>
</div>
<div class="x_content">
<br />
<form id="formsubmit" th:action="@{|/config/${channel.channelCode}/create|}" th:object="${createForm}" method="post" data-parsley-validate class="form-horizontal form-label-left">
<input type="hidden" id="channelCode" name="channelCode" th:value="${channel.channelCode}" readonly>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="code">Code <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="code" name="storeCode" required="required" class="form-control col-md-7 col-xs-12" th:value="*{storeCode}">
</div>
</div>
<div style="color: red; text-align: center">
<p th:if="${err}">Store Code already exist</p>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="name" name="storeName" required="required" class="form-control col-md-7 col-xs-12" th:value="*{storeName}">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="courier">Courier <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="courier" name="courierName" required="required" class="form-control col-md-7 col-xs-12" th:value="*{courierName}">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="province">Province <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="province" name="storeProvince" required="required" class="form-control col-md-7 col-xs-12" th:value="*{storeProvince}">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="city">City <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="city" name="storeCity" required="required" class="form-control col-md-7 col-xs-12" th:value="*{storeCity}">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="district">District <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="district" name="storeDistrict" required="required" class="form-control col-md-7 col-xs-12" th:value="*{storeDistrict}">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="address">Address <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="address" name="storeAddress" required="required" class="form-control col-md-7 col-xs-12" th:value="*{storeAddress}">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="phone">Phone <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" id="phone" name="storePhone" required="required" class="form-control col-md-7 col-xs-12" th:value="*{storePhone}">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="active">Active </label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="checkbox" id="active" name="active" th:checked="*{active}">
<label>Yes</label>
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<button class="btn btn-primary" type="reset">Reset</button>
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js"></script>
<script src="formvalid.js"></script>
</body>
</html>
& my formvalid.js:
$(document).ready(function(){
$("#formsubmit").validate({
rules:{
storeName:{
minlength: 5
}
},
messages:{
storeName:{
minlength: 'Store Name at least 5 characters'
}
},
submitHandler: function(form){
form.submit();
}
})
})
The problem is after I submitted the form with wrong input, the error doesn't show up instead the form completely saved & sent the data to database... Oh yeah one more thing, my javascript syntaxes are still not colored yet & I still need to type the double brackets manually & no auto completion for the syntaxes, so is there's something wrong with that too?
