Level 122
whats your question?
Aug 9, 2023
1
Level 4
HTML% validation not working
Im trying to utilize the html5 validation features but it wont work on my multi-step form
<div class="col-xl-12 col-xxl-12">
<div class="card">
<div class="card-header">
<h4 class="card-title"> {{ now()->year }} Request Form </h4>
</div>
<div class="card-body">
<div class = "nav nav-fill my-3 test">
<label class = "nav-link shadow-sm step0 border ml-2 equal"> Client Information</label>
<label class = "nav-link shadow-sm step1 border ml-2 equal"> Family demographics</label>
<label class = "nav-link shadow-sm step2 border ml-2 equal"> Order</label>
</div>
<form action="{{url('requestFormData')}}" id="multi-step-form" class="multi-step-form" method="POST">
<div>
@csrf
<section class ="form-section">
<h4>Client Info</h4>
<div class="row">
<div class="col-lg-2 mb-4">
<div class="form-group">
<label class="text-label">First Name*</label>
<input type="text" name="firstName" class="form-control" placeholder="FirstName" required >
</div>
</div>
<div class="col-lg-2 mb-4">
<div class="form-group">
<label class="text-label">Last Name*</label>
<input type="text" name="lastName" class="form-control" placeholder="LastName" required>
</div>
</div>
<!-- drop dowwn with agency -->
<div class="form-group col-md-4">
<label>Select agency </label>
<select class="form-control" id="inputState" name="agency" required>
<option selected="">Choose...</option>
@foreach ($agencyModel as $agency)
<option value="{{ $agency['agencyname']}}">{{ $agency['agencyname']}}</option>
@endforeach
</select>
</div>
<div class="col-lg-2 mb-4">
<div class="form-group">
<label class="text-label">Advocate First Name*</label>
<input type="text" name="advocatefirstName" class="form-control" placeholder="FirstName" required>
</div>
</div>
<div class="col-lg-2 mb-4">
<div class="form-group">
<label class="text-label">Advocate Last Name*</label>
<input type="text" name="advocatelastName" class="form-control" placeholder="LastName" required>
</div>
</div>
<div class="col-lg-5 mb-4">
<div class="form-group">
<label class="text-label">Phone Number*</label>
<input type="text" name="phone_number" class="form-control" placeholder="Phone Number" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" title="Please enter a valid phone number in the format XXX-XXX-XXXX" required>
</div>
</div>
<div class="col-lg-5 mb-4">
<div class="form-group">
<label class="text-label">Move in date*</label>
<input type="text" name="moveindate" class="form-control" placeholder="Move In Date" required>
</div>
</div>
<!-- drop dowwn with gender -->
<div class="form-group col-md-3">
<label>Select Gender</label>
<select class="form-control" id="inputState" name="Gender" required>
<option selected disabled>Choose...</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<!-- drop dowwn with maritial status -->
<div class="form-group col-md-3">
<label>Select Maritial Status</label>
<select class="form-control" id="inputState" name="MaritalStatus" required>
<option selected disabled>Choose...</option>
<option value="Married">Married</option>
<option value="Divorced">Divorced</option>
<option value="Separated">Separated</option>
<option value="Widowed">Widowed</option>
<option value="Single">Single</option>
<option value="Never Married">Never Married</option>
</select>
</div>
<div class="form-group col-md-3">
<div class="form-group">
<label class="text-label">Date of Birth*</label>
<input type="text" name="dob" class="form-control" placeholder="DateOfBirth" required>
</div>
</div>
<div class="form-group col-md-3">
<label>Email</label>
<input type="email" placeholder="[email protected]" name="email" class="form-control" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" title="Please enter a valid email address" required>
</div>
<div class="col-lg-12 mb-4">
<div class="form-group">
<label class="text-label"> Address</label>
<div class="input-group">
<input type="text" class="form-control" name="address" id="inputGroupPrepend2" aria-describedby="inputGroupPrepend2" placeholder="address 1" required>
</div>
</div>
</div>
<div class="col-lg-1 mb-4">
<div class="form-group">
<label class="text-label">Number of Adults *</label>
<input type="number" name="numberofAdults" id = "numberofAdults" min ="0" max ="10" class="form-control" onchange="addAdultFields()" required>
</div>
</div>
<div class="col-lg-1 mb-4">
<div class="form-group">
<label class="text-label">Number of Children*</label>
<input type="number" name="numberofChildren" id = "numberofChildren" min ="0" max ="10" class="form-control" onchange="addChildrenFields()" >
</div>
</div>
</section>
<section class ="form-section" >
<h4>family geographics</h4>
<div class = "familycontainer">
<div id="adultFormcontainer" ></div>
<div id="children-form-container" ></div>
</div>
</section>
<section class="form-section" >
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Order Section </h4>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered verticle-middle table-responsive-sm">
<thead>
<tr>
<th scope="col">LIVING ROOM</th>
<th scope="col">kITCHEN</th>
<th scope="col">BEDROOM</th>
<th scope="col">MISC</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table class ="table table-bordered verticle-middle table-responsive-sm">
<thead>
<th scope="col">NEED</th>
<th scope="col">ITEM</th>
</thead>
<tbody>
@foreach ($livingrooms as $livingroom)
<tr>
<td><input type="number" name="livingroomitems" id = "livingroomitems" min ="0" max = "5" class="form-control"></td>
<td> {{$livingroom['livingroom_item']}} </td>
</tr>
@endforeach
</tbody>
</table>
</td>
<td>
<table class ="table table-bordered verticle-middle table-responsive-sm">
<thead>
<th scope="col">NEED</th>
<th scope="col">ITEM</th>
</thead>
<tbody>
@foreach ($kitchens as $kitchen)
<tr>
<td> <input type="number" name="kichenitems" id = "kitchenitems" min ="0" max = "5" class="form-control"> </td>
<td> {{$kitchen['kitchen_item']}} </td>
</tr>
@endforeach
</tbody>
</table>
</td>
<td>
<table class ="table table-bordered verticle-middle table-responsive-sm">
<thead>
<th scope="col">NEED</th>
<th scope="col">ITEM</th>
</thead>
<tbody>
@foreach ($bedrooms as $bedroom)
<tr>
<td> <input type="number" name="bedroomitems" id = "bedroomitems" min ="0" max = "5" class="form-control"> </td>
<td> {{$bedroom['bedroom_item']}} </td>
</tr>
@endforeach
</tbody>
</table>
</td>
<td>
<table class ="table table-bordered verticle-middle table-responsive-sm">
<thead>
<th scope="col">NEED</th>
<th scope="col">ITEM</th>
</thead>
<tbody>
@foreach ($miscellaneous as $miscellaneou)
<tr>
<td> <input type="number" name="miscsitems" id = "miscsitems" min ="0" max = "5" class="form-control"> </td>
<td> {{ $miscellaneou->misc_item }} </td>
</tr>
@endforeach
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="table table-bordered verticle-middle table-responsive-sm">
<thead>
<tr>
<th scope="col">BABY</th>
<th scope="col">SMALL APPLIANCE</th>
<th scope="col">BEDDING</th>
<th scope="col">BATH</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<table class ="table table-bordered verticle-middle table-responsive-sm">
<thead>
<th scope="col">NEED</th>
<th scope="col">ITEM</th>
</thead>
<tbody>
@foreach ($babies as $baby)
<tr>
<td> <input type="number" name="babyitems" id = "babyitems" min ="0" max ="5" class="form-control"> </td>
<td> {{ $baby->baby_item }} </td>
</tr>
@endforeach
</tbody>
</table>
</td>
<td>
<table class ="table table-bordered verticle-middle table-responsive-sm">
<thead>
<th scope="col">NEED</th>
<th scope="col">ITEM</th>
</thead>
<tbody>
@foreach ($smallAppliances as $SA)
<tr>
<td> <input type="number" name="SAitems" id = "SAitems" min ="0" max ="5" class="form-control"> </td>
<td> {{ $SA->smallAppliances_item }} </td>
</tr>
@endforeach
</tbody>
</table>
</td>
<td>
<table class ="table table-bordered verticle-middle table-responsive-sm">
<thead>
<th scope="col">NEED</th>
<th scope="col">ITEM</th>
</thead>
<tbody>
@foreach ($beddings as $bed)
<tr>
<td> <input type="number" name="beddingitems" id = "beddingitems" min ="0" max = "5" class="form-control"> </td>
<td> {{ $bed->bedding_item }} </td>
</tr>
@endforeach
</tbody>
</table>
</td>
<td>
<table class ="table table-bordered verticle-middle table-responsive-sm">
<thead>
<th scope="col">NEED</th>
<th scope="col">ITEM</th>
</thead>
<tbody>
@foreach ($baths as $bathe)
<tr>
<td> <input type="number" name="bathitems[{{ $bathe->id }}]" id="bathitems_{{ $bathe->id }}" min ="0" max = "5" class="form-control" > </td>
<td> {{ $bathe->bath_item }} </td>
</tr>
@endforeach
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<div class = "form-navigation mt-3">
<button type="button" class =" previous btn btn-primary float-left"> previous </button>
<button type="button" class =" next btn btn-primary float-right">Next </button>
<button type="submit" class =" btn btn-success float-right"> Submit </button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
here is the js for the multi step form
$(function(){
var $sections=$('.form-section');
function navigateTo(index){
$sections.removeClass('current').eq(index).addClass('current');
$('.form-navigation .previous').toggle(index>0);
var atTheEnd = index >= $sections.length - 1;
$('.form-navigation .next').toggle(!atTheEnd);
$('.form-navigation [Type=submit]').toggle(atTheEnd);
//const step= document.querySelector('.step'+index);
//step.style.backgroundColor="#17a2b8";
//step.style.color="white";
}
function curIndex(){
return $sections.index($sections.filter('.current'));
}
$('.form-navigation .previous').click(function(){
navigateTo(curIndex() - 1);
});
// test
// handles the next function
$('.form-navigation .next').click(function(){
// alert("you push the next button from progress .js");
var currentIndex =curIndex();
if(currentIndex <$sections.length -1){
navigateTo(currentIndex + 1);
}
});
$sections.each(function(index,section){
$(section).find(':input').attr('data-parsley-group','block-'+index);
});
navigateTo(0);
});
Please or to participate in this conversation.