在智能向导中使用自定义验证？

Question

我想问一下我是否可以在智能向导中使用Laravel验证。

我的示例从 laravel 获取一条错误消息以显示在智能向导中。

在这个阶段，我遵循了官方网络文档的示例。

这是我编写的代码：

在文件中。blade.php

@extends('layouts.base')

@section('before_script')
    <link rel="stylesheet" href="{{ asset('assets/css/smart_wizard.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/smart_wizard_theme_dots.min.css') }}">
    <script src="{{ asset('assets/js/jquery.smartWizard.min.js')}}"></script>
    <script src="{{ asset('assets/js/bootstrap-validation.min.js') }}"></script>
    <style>
        .sw-btn-group {
            width: 100%;
            height: auto;
        }
    </style>
    <script>
        $(document).ready(function () {
            $('#smartwizard').smartWizard({
                theme: 'dots',
                transitionEffect: 'fade',
                transitionSpeed: '400',
                lang: { next: 'Selanjutnya', previous: 'Kembali'},
                toolbarSettings: {
                    toolbarButtonPosition: 'left',
                    showNextButton: true,
                    showPreviousButton: true
                }
            })

            $('#smartwizard').on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
                var elmForm = $("#form-step-" + stepNumber);
                if (stepDirection === 'forward' && elmForm) {
                    elmForm.validator('validate');
                    var elmErr = elmForm.children('.has-error');
                    if (elmErr && elmErr.length > 0) {
                        return false;
                    }
                }
                return true;
            })
        })

    </script>
@endsection

@section('content')
<section>
    <div class="container">
        {{-- <br><br> --}}
        <form action="#" id="myForm" role="form" data-toggle="validator" method="post" accept-charset="utf-8">
            <div id="smartwizard">
                <ul>
                    <li><a href="#step-1">Step Title<br /><small>Step description</small></a></li>
                    <li><a href="#step-2">Step Title<br /><small>Step description</small></a></li>
                    <li><a href="#step-3">Step Title<br /><small>Step description</small></a></li>
                    <li><a href="#step-4">Step Title<br /><small>Step description</small></a></li>
                </ul>

                <div>
                    <div id="step-1" class="">
                        <h2>Your Name</h2>
                        <div id="form-step-0" role="form" data-toggle="validator">
                            <div class="form-group">
                                <label for="name">Name: </label>
                                <input type="text" name="name" id="name" class="form-control" required placeholder="enter your name">
                                <div class="help-block with-errors"></div>
                            </div>

                            <div class="form-group">
                                <label class="control-label">Pin</label>
                                <input id="pin" type="tel" pattern="[0-9]*" inputmode="numeric" style="-webkit-text-security: disc;" autocomplete="off" maxlength="6" name="pin" placeholder="{{ __('PIN') }}"
                                    class="{{ $errors->has('pin') ? ' is-invalid form-control' : 'form-control' }}" onkeypress="checkPin(event);" required/>

                                @if ($errors->has('pin'))
                                    <div class="help-block with-errors">{{$errors->first('pin')}}</div>
                                @endif
                            </div>
                            <div class="form-group">
                                <label class="control-label">confirm</label>
                                <input type="tel" name="pin_confirmation" pattern="[0-9]*" inputmode="numeric" style="-webkit-text-security: disc;" autocomplete="off"
                                    placeholder="{{ __('confirm) }}" class="form-control" maxlength="6" onkeypress="checkPin(event);" required/>
                                @if ($errors->has('pin'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('pin_confirmation') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div id="step-2" class="">
                        Step Content
                    </div>
                    <div id="step-3" class="">
                        Step Content
                    </div>
                    <div id="step-4" class="">
                        Step Content
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>
@endsection

我在这里尝试输入输入引脚并发出来自 laravel 的错误消息。

没有出现错误消息，但在我正确填写表格之前仍然需要填写表格。

还有其他方法吗？或者实际上我只能将它用作它的文档。

谢谢

Answer 1

我终于找到了解决方案，我只需要更改一些代码即可。

希望这可以帮助其他人使用智能向导。 :)

<script>
    $(document).ready(function () {
        $('#smartwizard').smartWizard({
            theme: 'dots',
            transitionEffect: 'fade',
            transitionSpeed: '400',
            lang: { next: 'Selanjutnya', previous: 'Kembali'},
            toolbarSettings: {
                toolbarButtonPosition: 'left',
                showNextButton: true,
                showPreviousButton: true
            }
        })

        $('#myForm').validate({
            rules: {
                name: {
                    required: true
                }
            },
            messages: {
                name: {
                    required: 'Please Enter Your Name'
                }
            }
        });

        $('#smartwizard').on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
            var elmForm = $("#form-step-" + stepNumber);
            if (stepDirection === 'forward' && elmForm) {
                // elmForm.validator('validate');
                // var elmErr = elmForm.children('.has-error');
                // if (elmErr && elmErr.length > 0) {
                //     return false;
                // }
                if ($('#myForm').valid()) {
                    return true
                } else {
                    return false
                }
            }
            return true;
        })
    })
</script>

在这种情况下，我使用 jquery 验证插件

在智能向导中使用自定义验证？

Use custom validation in smart wizard?

jquery

laravel

smart-wizard