php - 带有 Laravel 的 JQuery 验证插件
问题描述
我的前端验证规则似乎不起作用。附上我的 create.blade.php 和 member_form.blade.php 文件
创建.blade.php
{!! Form::model($member, ['action' => 'MemberController@store', 'id' => 'createform']) !!}
@include('members.partials.member_form')
<button class="btn btn-success" type="submit">Save Member</button>
{!! Form::close() !!}
<script>
$(document).ready(function(){
$("#createform").validate({
rules: {
name: {
required:true
}
}
});
});
</script>
member_form.blade.php
<div class="form-group">
{!! Form::label('name', 'First Name:') !!}
{!! Form::text('name', null, ['class' => 'form-control']) !!}
</div>
当我测试 Jquery 验证插件时,我只得到我的后端验证消息。当我尝试创建一个没有输入名称输入的空白创建表单时,没有出现前端验证消息。是我在错误的地方输入了js脚本还是我的代码错误?文档似乎与我在这里编码的内容一致。
呈现的 HTML:
<form method="POST" action="http://tomcrud.test:8080/members/store" accept-charset="UTF-8" id="createform"><input name="_token" type="hidden" value="Q1UhJGJBEvBKqZ2O8FuKL4ukY7Zdedfi0HUn2iHU">
<div class="form-group">
<label for="name">First Name:</label>
<input class="form-control" name="name" type="text" id="name">
</div>
<div class="form-group">
<label for="surname">Last Name:</label>
<input class="form-control" name="surname" type="text" id="surname">
</div>
<div class="form-group">
<label for="id_number">ID Number:</label>
<input class="form-control" name="id_number" type="text" id="id_number">
</div>
<div class="form-group">
<label for="mobile_number">Mobile Number:</label>
<input class="form-control" name="mobile_number" type="text" id="mobile_number">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input class="form-control" name="email" type="text" id="email">
</div>
<div class="form-group">
<label for="date_of_birth">D.O.B:</label>
<input class="form-control" name="date_of_birth" type="text" id="date_of_birth">
</div>
<div class="form-group">
<label for="language_id">Language:</label>
<select id="language_id" name="language_id"><option value="1">Afrikaans</option><option value="2">English</option><option value="3">Dutch</option><option value="4">Swahili</option><option value="5">German</option></select>
</div>
<div class="form-group">
<label for="interest_id[]">Interest:</label>
<select multiple class="form-control" id="interest_id[]" name="interest_id[]"><option value="1">Rugby</option><option value="2">Golf</option><option value="3">Tennis</option><option value="4">Squash</option><option value="5">Paragliding</option><option value="6">Movies</option><option value="7">Hiking</option><option value="8">Diving</option><option value="9">Fishing</option><option value="10">Hunting</option></select>
</div>
<button class="btn btn-success" type="submit">Save Member</button>
</form>
脚本文件:
<script src="http://tomcrud.test:8080/js/jquery-3.3.1.js"></script>
<script src="http://tomcrud.test:8080/js/bootstrap.js"></script>
<script src="http://tomcrud.test:8080/js/delete_confirm.js"></script>
<script src="http://tomcrud.test:8080/js/jquery.validate.js"></script>
解决方案
所以在一天结束时,修复是一个非常愚蠢的修复。我与我的一位开发人员朋友交谈,他建议我应该将参考放在主文件的底部而不是底部。那解决了它!为什么呢?我不知道...
<!DOCTYPE html>
<html>
<head>
<title>ProPay_CRUD - @yield('title')</title>
<link rel="stylesheet" href="{{asset('css/bootstrap.css')}}">
<link rel="stylesheet" href="{{asset('css/custom.css')}}">
<script src="{{asset('js/jquery-3.3.1.js')}}"></script>
</head>
<body>
@include('shared.header')
<div class="container">
<div class='row'>
<div class='col justify-content-center'>
<p></p>
@include('shared.errors')
@include('shared.message')
@yield('content')
</div>
</div>
</div>
@include('shared.footer')
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('js/delete_confirm.js')}}"></script>
<script src="{{asset('js/jquery.validate.min.js')}}"></script>
<script src="{{asset('js/additional-methods.min.js')}}"></script>
<script src="{{asset('js/validation.js')}}"></script>
</body>
</html>
推荐阅读
- angularjs - 在角度js Typescript中聚类滚动错误
- c# - 找不到方法:进行 Http 调用时的 System.Threading.Tasks.Task UserInfoResponse
- php - 从 wordpress 页面调用 SOAP 服务
- regex - 如何匹配两个组,其中组 2 是强制性的,组 1 是可选的
- mysql - 三表关联
- javascript - 识别算子并进行计算
- php - 按自定义顺序对 Laravel 集合排序,除了 asc 或 desc
- mysql - 我需要每个用户的特定表格数据
- azure - 手动安装 azure-cli 时出错
- ceph - ceph-deploy 时如何修复 Ceph 错误