JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<form action="{{ route('posts-listing.store') }}" method="POST" class="m-form m-form--label-align-right" id="m_post_submit">
<div class="modal-body">
@csrf
<div class="form-group m-form__group row">
<label class="col-md-4 col-form-label">Name: <span class="text-danger">*</span></label>
<div class="col-md-8">
<input class="form-control m-input" type="text" placeholder="Enter name" name="name" autofocus>
</div>
</div>
<div class="form-group m-form__group row">
<label class="col-md-4 col-form-label" for="phone_country">Phone Number: <span class="text-danger">*</span></label>
<div class="col-md-8">
<div class="input-group m-input-group">
<div class="input-group-prepend">
<select class="form-control m-bootstrap-select m_selectpicker" name="phone_country" id="phone_country">
<option value="1" selected title="SK">Slovakia (+421)</option>
<option data-divider="true"></option>
<option value="2" title="CZ">Czech (+420)</option>
</select>
</div>
<input type="text" class="form-control" id="m_inputmask_phone" name="phone_number" placeholder="Enter phone number">
</div>
</div>
</div>
<div class="form-group m-form__group row">
<label class="col-md-4 col-form-label">E-mail address:</label>
<div class="col-md-8">
<input class="form-control m-input" type="email" placeholder="Enter your email" name="email" autocomplete="off" required="false">
</div>
</div>
<div class="form-group m-form__group row">
<label class="col-md-4 col-form-label">Note:</label>
<div class="col-md-8">
...
JavaScript
$(document).ready(function() {
$('#m_post_submit').validate({
rules: {
name: {
required: true
},
phone_number: {
required: true,
minlength: 12
},
email: {
required: false
email: true
}
},
submitHandler: function(form) {
form.ajaxSubmit({
type: 'post',
url: form.attr('action'),
data: form.serialize(),
success: function() {
btn.removeClass('m-loader m-loader--right m-loader--light').attr('disabled', false);
location.reload();
}
});
return false;
}
});
});