这是我的刀片文件
@extends('layouts.master')
@section('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endsection
@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
$(".js-flatpickr").flatpickr({
dateFormat: "m/d/Y",
});
</script>
@endsection
@section('content')
<div class="content" id="app">
@include('pages.partials.application-steps')
@include('partials.error')
<form class="js-validation-material" action="{{ route('personal.post') }}" method="post" autocomplete="off">
@csrf
<div class="block">
<div class="block-header block-header-default">
<h3 class="block-title" style="text-align: center;">Personal Information</h3>
</div>
<div class="block-content">
<div class="row justify-content-center py-20">
<div class="col-xl-8">
<div class="row">
<div class="col">
<div class="form-material">
<input type="text" class="form-control{{ $errors->has('first_name') ? ' is-invalid' : '' }}" id="first_name" name="first_name" value="{{ $employee->first_name }}" required>
<label for="first_name">First Name *</label>
@if ($errors->has('first_name'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('first_name') }}</strong>
</span>
@endif
</div>
</div>
<div class="col">
<div class="form-material">
<input type="text" class="form-control{{ $errors->has('last_name') ? ' is-invalid' : '' }}" id="last_name" name="last_name" value="{{ $employee->last_name }}" required>
<label for="last_name">Last Name *</label>
@if ($errors->has('last_name'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('last_name') }}</strong>
</span>
@endif
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-material">
<input type="text" required class="js-flatpickr js-flatpickr-enabled form-control{{ $errors->has('date_of_birth"') ? ' is-invalid' : '' }}" id="date_of_birth" name="date_of_birth" placeholder="Click here to choose date" value="{{ $employee->date_of_birth}}">
<label for="date_of_birth">Date of Birth *</label>
@if ($errors->has('date_of_birth'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('date_of_birth') }}</strong>
</span>
@endif
</div>
</div>
<div class="col">
<div class="form-material">
<select class="form-control{{ $errors->has('marital_status') ? ' is-invalid' : '' }}" id="marital_status" name="marital_status" value="{{ old('marital_status') }}" required>
<option value="">...</option>
<option value="Married" @if ($employee->marital_status == "Married") selected @endif>Married</option>
<option value="Unmarried" @if ($employee->marital_status == "Unmarried") selected @endif>Unmarried</option>
<option value="Other" @if ($employee->marital_status == "Other") selected @endif>Other</option>
</select>
<label for="marital_status">Marital Status *</label>
@if ($errors->has('marital_status'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('marital_status') }}</strong>
</span>
@endif
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-12">Are you legally eligible to work in Canada? *</label>
<div class="col-12">
<div class="custom-control custom-radio custom-control-inline mb-5">
<input class="custom-control-input" type="radio" name="eligible" id="yes-eligible" value="Yes" {{ ($employee->eligible=="Yes")? "checked" : "" }} required>
<label class="custom-control-label" for="yes-eligible">Yes</label>
</div>
<div class="custom-control custom-radio custom-control-inline mb-5">
<input class="custom-control-input" type="radio" name="eligible" id="no-eligible" value="No" {{ ($employee->eligible=="No")? "checked" : "" }}>
<label class="custom-control-label" for="no-eligible">No</label>
</div>
</div>
</div>
<nav class="clearfix push">
<button type="submit" class="btn btn-primary min-width-100 float-right" id="save">Save & Continue</button>
</nav>
</form>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
form: {
commute: '',
status: ''
}
},
methods: {
refresh_flatpickr: function() {
console.log('asa');
$(".js-flatpickr-status").flatpickr({
dateFormat: "m/d/Y",
});
}
}
})
$(document).ready(function () {
// SIN Number Add Dashes
$('#sin').keyup(function() {
var foo = $(this).val().split("-").join(""); // remove hyphens
if (foo.length > 0) {
foo = foo.match(new RegExp('.{1,3}', 'g')).join("-");
}
$(this).val(foo);
});
$("#save").click(function(){
var eligible = $("input[name='eligible']:checked").val();
if(eligible == 'No'){
alert("You need to be eliable to work in Canada to get this job.");
return false;
}
***var date_of_birth = $("input[name='date_of_birth']").val();
if(date_of_birth != ' '){
alert("Choose date of birth");
return false;
}***
});
});
</script>
@endsection
单击保存按钮时，此突出显示的部分在脚本中不起作用..
请帮忙 ！！我想使用 javascript 将我的日期设为必填字段，那么我如何在其上应用必填字段验证器？对于符合条件的，相同的编码正在工作！
在我的控制器中，日期已经需要验证器，如下所示 -
$validator = Validator::make($request->all(), [
'first_name' => 'required',
'last_name' => 'required',
'date_of_birth' => 'required',
'marital_status' => 'required',
'preferred_language' => 'required',
'eligible' => 'required',
]);
if ($validator->fails()) {
return redirect()
->back()
->withErrors($validator)
->withInput();
}