Question

我的前端验证规则似乎不起作用。这是我的create.blade.php和member_form.blade.php文件

create.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>

Answer 1

所以在一天结束时，修复是一个非常愚蠢的修复。我和我的一位开发人员朋友交谈，他建议我将引用放在主文件的底部而不是底部。修好了！为什么呢？我不知道......

    <!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>

Laravel

1 个答案: