Jan 31, 2023
0
Level 1
Multistep form issue using jQuery Validate
I have multiple step form to submit project details divided into three sections which is #account_information, #personal_information & #project_information. I'm facing two issues with this approach: 1- If there is an error in validate the section I can not see the field highlighted in red Also not message display below that field. 2- input file field even if you select a file it will still display an error which not allow me to move into next step ?
Html
<form action="{{ route('StoreProjectUser') }}" id="AddProjectForm" method="POST" enctype="multipart/form-data">
@csrf
<section class="target_box">
<fieldset id="account_information" class="">
<div id="div1" class="target">
<h4 class="mt-3">أولاً: السيرة الذاتية باللغة العربية وتشمل على:</h4>
<h6 class="mt-3">1- بيانات المشارك الشخصية</h6>
<div class="form-group mt-3">
<label class="form-label">الجنس <span class="text-danger">*</span></label>
<div class="form-check">
<input class="form-check-input" type="radio" name="Radiobtn" id="maleRadiobtn" value="M" checked>
<label class="form-check-label" for="maleRadiobtn">
ذكر
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="Radiobtn" id="femaleRadiobtn" value="F">
<label class="form-check-label" for="femaleRadiobtn">
أنثى
</label>
</div>
@error('Radiobtn')
<span class="text-danger"> {{ $message }} </span>
@enderror()
</div>
<div class="row mt-3">
<label for="stay_address_field" class="form-label">مكان الإقامة <span class="text-danger">*</span></label>
<input type="text" name="stay_address_field" id="stay_address_field" class="form-control" placeholder="" value="{{old('stay_address_field')}}" required />
@error('stay_address_field')
<span class="text-danger"> {{ $message }} </span>
@enderror()
</div>
<div class="row mt-3">
<label for="civil_id_image_field" class="form-label">صورة واضحة وملونة للبطاقة المدنية <span class="text-danger">*</span></label>
<input type="file" name="civil_id_image_field" id="civil_id_image_field" class="form-control" placeholder="" accept=".png, .jpg, .jpeg" required />
@error('civil_id_image_field')
<span class="text-danger"> {{ $message }} </span>
@enderror()
</div>
<div class="row mt-3">
<div class="hstack gap-2 justify-content-end">
<a class="btn btn-light Single next" target="2">التالي</a>
</div>
</div>
</div>
</fieldset>
<fieldset id="personal_information" class="">
<div id="div2" class="target">
<h4 class="mt-3">أولاً: السيرة الذاتية باللغة العربية وتشمل على:</h4>
<h6 class="mt-3">2- بيانات المشارك الميدانية</h6>
<div class="row mt-3">
<label for="participate_category_field" class="form-label">فئة المشارك <span class="text-danger">*</span></label>
<select class="form-select" aria-label="Default select example" name="participate_category_field" id="participate_category_field" required >
<option selected disabled>--حدد فئة المشارك--</option>
<option value="1">طالب</option>
<option value="2">معلم</option>
<option value="3">موظف</option>
<option value="4">إشرافي</option>
<option value="5">ولي أمر</option>
<option value="6">تربوي متقاعد</option>
<option value="7">غير ذلك</option>
</select>
@error('participate_category_field')
<span class="text-danger"> {{ $message }} </span>
@enderror()
</div>
<div class="row mt-3">
<label for="governorate_field" class="form-label">المحافظة <span class="text-danger">*</span></label>
<input type="text" name="governorate_field" id="governorate_field" class="form-control" placeholder="" value="{{old('governorate_field')}}" required />
@error('governorate_field')
<span class="text-danger"> {{ $message }} </span>
@enderror()
</div>
<div class="row mt-3">
<label for="certificate_concern_field" class="form-label">صورة واضحة بنوع لشهادة تزكية من مدير المدرسة / مدير المؤسسة <span class="text-danger">*</span></label>
<input type="file" name="certificate_concern_field" id="certificate_concern_field" class="form-control" placeholder="" accept=".png, .jpg, .jpeg" required />
@error('certificate_concern_field')
<span class="text-danger"> {{ $message }} </span>
@enderror()
</div>
<div class="row mt-3">
<div class="hstack gap-2 justify-content-end">
<a class="btn btn-light Single previous" target="1">تراجع</a>
<a class="btn btn-light Single next" target="3">التالي</a>
</div>
</div>
</div>
</fieldset>
<fieldset id="project_information" class="">
<div id="div3" class="target">
<h4 class="mt-3">ثانياً: الملف الإنجازي باللغة العربية ويشمل على:</h4>
<h6 class="mt-3">بيانات المشروع وتشمل التالي:</h6>
<div class="row mt-3">
<label for="project_title_field" class="form-label">اسم المشروع <span class="text-danger">*</span></label>
<input type="text" name="project_title_field" id="project_title_field" class="form-control" placeholder="" value="{{old('project_title_field')}}" required />
@error('project_title_field')
<span class="text-danger"> {{ $message }} </span>
@enderror()
</div>
<div class="row mt-3">
<label for="project_shorts_field" class="form-label">وصف مختصر للمشروع</label>
<input type="text" name="project_shorts_field" id="project_shorts_field" class="form-control" placeholder="" value="{{old('project_shorts_field')}}" required />
@error('project_shorts_field')
<span class="text-danger"> {{ $message }} </span>
@enderror()
</div>
<div class="row mt-3">
<label for="project_images_field" class="form-label">ملف صوري بنوع ( jpg, png ) يصف المشروع ب 10 صور كبيرة قياس ( 1070*1600 ) ملونة وواضحة. <span class="text-danger">*</span></label>
<input type="file" name="project_images_field[]" id="project_images_field" class="form-control" placeholder="" multiple required />
@error('project_images_field')
<span class="text-danger"> {{ $message }} </span>
@enderror()
</div>
<div class="form-check mt-3 text-right">
<input type="checkbox" name="accept_terms_field" id="accept_terms_field" class="form-check-input" required />
<label for="accept_terms_field" class="form-check-label float-right">أقر بأن جميع البيانات أعلاه صحيحة وأنني صاحب المشروع وتعود ملكيته لي وأتعهد بأن أقدم كافة الوثائق المطلوبة مني من قبل إدارة المشروع كما أقر بموافقتي على نشر مشروعي في وسائل الإعلام الحديثة ووسائل التواصل الإجتماعي.</label>
@error('accept_terms_field')
<span class="text-danger"> {{ $message }} </span>
@enderror()
</div>
<div class="row mt-3">
<div class="hstack gap-2 justify-content-end">
<a class="btn btn-light Single previous" target="2">تراجع</a>
<!--<a href="{{ route('projectsList') }}" class="btn btn-light">إلغاء</a>-->
<button type="submit" class="btn btn-success" id="add-btn">إرسال</button>
</div>
</div>
</div>
</fieldset>
</section>
</form>
Javacript
<script type="text/javascript">
$(document).ready(function (){
let multiStepsArea = ['#account_information', '#personal_information', '#project_information']
let currentNum = 0;
$('.next').click(function(){
var form = $("#AddProjectForm");
form.validate({
rules: {
stay_address_field: {
required: true,
},
},
messages: {
stay_address_field: {
required: "يجب تحديد مكان الإقامة",
},
}
});
if (form.valid() == true){
if(currentNum === 0) {
current_fs = $(multiStepsArea[currentNum]);
currentNum++;
next_fs = $(multiStepsArea[currentNum]);
next_fs.show();
current_fs.hide();
}else if(currentNum === 1) {
current_fs = $(multiStepsArea[currentNum]);
currentNum++;
next_fs = $(multiStepsArea[currentNum]);
next_fs.show();
current_fs.hide();
}
}
});
$('.previous').click(function(){
if(currentNum === 1) {
current_fs = $(multiStepsArea[currentNum]);
currentNum--;
next_fs = $(multiStepsArea[currentNum]);
next_fs.show();
current_fs.hide();
}else if(currentNum === 2) {
current_fs = $(multiStepsArea[currentNum]);
currentNum--;
next_fs = $(multiStepsArea[currentNum]);
next_fs.show();
current_fs.hide();
}
});
});
</script>
Please or to participate in this conversation.