Level 1
jQuery doesn't have the "validate" function. You need a separate plugin (jQuery Validation). Are you sure it's on the page? I cannot see it in you code.
Apr 16, 2024
8
Level 2
In Tab based form validation, validation only work for last tab with submit button . How to work this validation for all tabs ?
Dear Friends, In my given Laravel blade file the jQuery validation only work for fields "centre_code" & "entrepreneur_name" which come in last tab with "Submit" button. But in first tab required field "district" validation not work and submit the ajax form. How to fix this issue . My relevant code is
<style>
* {
box-sizing: border-box
}
/* Set height of body and the document to 100% */
body,
html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: black;
display: none;
padding: 100px 20px;
/* height: 100%; */
border: 1px solid grey;
}
#Location {
background-color: white;
}
#Communication {
background-color: white;
}
#Bank {
background-color: white;
}
#Personal {
background-color: white;
}
</style>
@include('admin.includes.header')
@include('admin.includes.headerTop')
@include('admin.includes.leftMenu')
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<div class="col-sm-12">
<div class="home-tab">
<div class="d-sm-flex align-items-center justify-content-between border-bottom">
<h5>Add Centre Master</h5>
<div>
</div>
</div>
<body>
<button class="tablink" onclick="openPage('Location', this, 'red')" id="defaultOpen">Location
Info</button>
<button class="tablink" onclick="openPage('Communication', this, 'green')">Communication
Info</button>
<button class="tablink" onclick="openPage('Bank', this, 'blue')">Bank Info</button>
<button class="tablink" onclick="openPage('Personal', this, 'orange')">Personal Info</button>
<form id="AddCentreMasterForm" name="AddCentreMasterForm" autocomplete="off" action="javascript:void(0)" method="POST" enctype="multipart/form-data">
@csrf
<div id="Location" class="tabcontent">
<div class="row">
<div class="col-sm-4">
<label for="district">District</label>
<input type="text" class="form-control" id="district" name="district" />
<span id="district-error" class="error"></span>
</div>
<div class="col-sm-4">
<label for="start">Village</label>
<input type="text" class="form-control" id="village" name="village" />
</div>
<div class="col-sm-4">
<label for="start">Taluk</label>
<input type="text" class="form-control" id="taluk" name="taluk" />
</div>
<div class="col-sm-4">
<label for="start">Block</label>
<input type="text" class="form-control" id="block" name="block" />
</div>
<div class="col-sm-4">
<label for="start">Revenue District</label>
<input type="text" class="form-control" id="revenue_district"
name="revenue_district" />
</div>
<div class="col-sm-4">
<label for="start">Location Code</label>
<input type="text" class="form-control" id="location_code"
name="location_code" />
</div>
<div class="col-sm-4">
<label for="start">LSG</label>
<input type="text" class="form-control" id="lsg" name="lsg" />
</div>
<div class="col-sm-4">
<label for="start">LSG Type</label>
<input type="text" class="form-control" id="lsg_type" name="lsg_type" />
</div>
<div class="col-sm-4">
<label for="start">Latitude</label>
<input type="text" class="form-control" id="latitude" name="latitude" />
</div>
<div class="col-sm-4">
<label for="start">Longitude</label>
<input type="text" class="form-control" id="longitude" name="longitude" />
</div>
</div>
<hr>
<div class="col-md-12" align="right" style="padding-right: 3%;">
<a class="btn btn-primary btnNext1">Next >></a>
</div><br><br>
</div>
<div id="Communication" class="tabcontent">
<div class="row">
<div class="col-sm-4">
<label for="start">Centre Name</label>
<input type="text" class="form-control" id="centre_name" name="centre_name" />
</div>
<div class="col-sm-4">
<label for="start">Centre Address</label>
<textarea class="form-control" style="height: 100px;" id="centre_address"
name="centre_address"></textarea>
</div>
<div class="col-sm-4">
<label for="start">Pincode</label>
<input type="text" class="form-control" id="pincode" name="pincode" />
</div>
<div class="col-sm-4">
<label for="start">Mobile No: 1</label>
<input type="number" class="form-control" id="mobile_no_1" name="mobile_no_1" />
</div>
<div class="col-sm-4">
<label for="start">Mobile No: 2</label>
<input type="number" class="form-control" id="mobile_no_2" name="mobile_no_2" />
</div>
<div class="col-sm-4">
<label for="start">Landline No. 1</label>
<input type="text" class="form-control" id="landline_no_1"
name="landline_no_1" />
</div>
<div class="col-sm-4">
<label for="start">Landline No. 2</label>
<input type="text" class="form-control" id="landline_no_2"
name="landline_no_2" />
</div>
<div class="col-sm-4">
<label for="start">E-mail 1</label>
<input type="email" class="form-control" id="e_mail_1" name="e_mail_1" />
</div>
<div class="col-sm-4">
<label for="start">E-mail 2</label>
<input type="email" class="form-control" id="e_mail_2" name="e_mail_2" />
</div>
<div class="col-sm-4">
<label for="start">Whatsapp No 1</label>
<input type="text" class="form-control" id="whatsapp_no_1"
name="whatsapp_no_1" />
</div>
<div class="col-sm-4">
<label for="start">Whatsapp No 2</label>
<input type="text" class="form-control" id="whatsapp_no_2"
name="whatsapp_no_2" />
</div>
</div>
<hr>
<div class="col-md-12" align="right" style="padding-right: 3%;">
<a class="btn btn-primary btnPrevious">
<< Previous </a>
<a class="btn btn-primary btnNext1">Next >></a>
</div><br><br>
</div>
<div id="Bank" class="tabcontent">
<div class="row">
<div class="col-sm-4">
<label for="start">Bank Branch Name</label>
<input type="text" class="form-control" id="bank_branch_name"
name="bank_branch_name" />
</div>
<div class="col-sm-4">
<label for="start">Branch Code</label>
<input type="text" class="form-control" id="branch_code" name="branch_code" />
</div>
<div class="col-sm-4">
<label for="start">Bank IFSC Code</label>
<input type="text" class="form-control" id="bank_ifsc_code"
name="bank_ifsc_code" />
</div>
<div class="col-sm-4">
<label for="start">Bank Account No.</label>
<input type="text" class="form-control" id="bank_account_no"
name="bank_account_no" />
</div>
</div>
<hr>
<div class="col-md-12" align="right" style="padding-right: 3%;">
<a class="btn btn-primary btnPrevious">
<< Previous </a>
<a class="btn btn-primary btnNext1">Next >></a>
</div><br><br>
</div>
<div id="Personal" class="tabcontent">
<div class="row">
<div class="col-sm-4">
<label for="start">Centre Code</label>
<input type="text" class="form-control" id="centre_code" name="centre_code" />
</div>
<div class="col-sm-4">
<label for="start">Entrepreneur Name</label>
<input type="text" class="form-control" id="entrepreneur_name"
name="entrepreneur_name" />
</div>
<div class="col-sm-4">
<label for="start">Entrepreneur Aadhaar No.</label>
<input type="text" class="form-control" id="entrepreneur_aadhaar_no"
name="entrepreneur_aadhaar_no" />
</div>
<div class="col-sm-4">
<label for="start">Pan Card</label>
<input type="text" class="form-control" id="pancard" name="pancard" />
</div>
<div class="col-sm-4">
<label for="start">Enrolment ID</label>
<input type="text" class="form-control" id="enrolment_id" name="enrolment_id" />
</div>
<div class="col-sm-4">
<label for="start">Registrar ID</label>
<input type="text" class="form-control" id="registrar_id" name="registrar_id" />
</div>
<div class="col-sm-4">
<label for="start">Centre Start Date</label>
<input type="text" class="form-control" id="centre_start_date"
name="centre_start_date" />
</div>
<div class="col-sm-4">
<label for="start">CSC Code</label>
<input type="text" class="form-control" id="csc_code" name="csc_code" />
</div>
<div class="col-sm-4">
<label for="start">No. of Employee</label>
<input type="text" class="form-control" id="no_of_employee"
name="no_of_employee" />
</div>
<div class="col-sm-4">
<label for="start">Centre Branded</label>
<select class="form-control" name="centre_branded" id="centre_branded">
<option value="">Select</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
</div>
<div class="col-sm-4">
<label for="start">Ownership Change Date</label>
<input type="text" class="form-control" id="ownership_change_date"
name="ownership_change_date" />
</div>
<div class="col-sm-4">
<label for="start">Remarks</label>
<input type="text" class="form-control" id="remarks" name="remarks" />
</div>
</div>
<hr>
<div class="col-md-12" align="right" style="padding-right: 3%;">
<a class="btn btn-primary btnPrevious">
<< Previous </a>
<button type="submit" class="btn btn-success" style="background:#28a745"
name="save" id="save">Submit</button>
</div><br>
</div>
</form>
</body>
</div>
</div>
<div class="tab-content tab-content-basic">
<div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview">
<div class="row">
<div class="col-sm-12">
<table id="list_stakeholders" class="table table-responsive table-bordered"
style="width:100%">
<thead>
<tr>
<th style="width:100px;">Sl. No.</th>
<th style="width:700px;">Centre Code</th>
</tr>
</thead>
<tbody>
@if($akshaya_code)
@foreach($akshaya_code as $index => $c)
<tr>
<td>{{ $index+1 }}</td>
<td>{{ $c->centre_code }}</td>
</tr>
@endforeach
@endif
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@include('admin.includes.footer')
@include('admin.includes.sweetalert')
<script>
function openPage(pageName, elmnt, color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<script type="text/javascript">
$('.btnNext').click(function() {
const nextTabLinkEl = $('.nav-tabs .active').closest('li').next('li').find('a')[0];
const nextTab = new bootstrap.Tab(nextTabLinkEl);
nextTab.show();
});
$('.btnPrevious').click(function() {
const prevTabLinkEl = $('.nav-tabs .active').closest('li').prev('li').find('a')[0];
const prevTab = new bootstrap.Tab(prevTabLinkEl);
prevTab.show();
});
$(document).ready(function() {
if ($("#AddCentreMasterForm").length > 0) {
$("#AddCentreMasterForm").validate({
rules: {
district: {
required: true,
},
centre_code: {
required: true,
},
entrepreneur_name: {
required: true,
},
},
messages: {
district: {
required: "Please select district",
},
centre_code: {
required: "Please enter centre code",
},
entrepreneur_name: {
required: "Please enter entrepreneur name",
},
},
errorPlacement: function(error, element) {
alert(element.attr("name"));
// Customize error placement for the district field
if (element.attr("name") === "district") {
error.insertAfter("#district-error");
return;
} else {
error.insertAfter(element);
}
},
submitHandler: function(form) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var csrfToken = "{{ csrf_token() }}";
$.ajax({
url: "SaveCentreMaster",
method: 'POST',
data: {
centre_code: $("#centre_code").val(),
_token: "{{ csrf_token() }}"
},
success: function(res) {
if (res == 1) {
swal({
title: "",
text: 'Saved Successfully!',
type: "",
}, function(result) {
$("#centre_code").val('');
location.reload();
});
} else if (res == 'AE') {
swal({
title: "",
text: 'Already Exist!',
type: "",
}, function(result) {
$("#centre_code").val('');
location.reload();
});
} else {
location.reload();
}
},
error: function(xhr, status, error) {
// Handle failure here
console.error("AJAX request failed:", status, error);
}
});
}
});
$(".tablink").click(function() {
$("#AddCentreMasterForm").valid();
});
}
});
</script>
Please advise
Thanks,
Anes P A
Level 29
By setting display: none, you are removing the elements from the form. Therefore they will not be included in the data when you post the form.
Try to use display: hidden instead of display:none.
You could also create a form data variable and add the values on input to that form data. When submitting the form you can include the variable to the post data.
Level 2
Dear @gych , Accroding to you I changed the style
.tabcontent {
color: black;
/*display: none;*/
display: hidden;
padding: 100px 20px;
border: 1px solid grey;
}
but still that "district" field validation not working .
Please advise
Thanks,
Anes P A
Level 29
@insight Is district the only field that's not working?
Level 2
@gych I only gave "district" field of first tab for testing purpose . If I get it work I can do it in all tabs . Please advise..
Thanks
Anes P A
Level 29
@insight Ok I see that in this part of the js code you are setting display: none, did you also change it in that part?
function openPage(pageName, elmnt, color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "hidden"; // changed display none to hidden
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
1 like
Level 2
Dear @gych , Your solution is not work fine . But I try one alternative as below
submitHandler: function(form) {
if ($("#AddCentreMasterForm").valid()) {
if ($("#district").val() == "") {
swal({
title: "Error",
text: "District is not selected",
icon: "error",
button: "OK",
});
document.getElementById("defaultOpen").click();
$("#AddCentreMasterForm").valid();
return;
}
It works fine. Need to give all mandatory fields in this logic . But works fine.
Thanks alot @gych
Anes P A
Level 29
@insight No problem I thought you were trying to get back end validation to work but seems like you only want validation in your js script, good that it works now! :)
Please or to participate in this conversation.