jquery - Foundation 6 表单未通过遵守验证

Question

将基础 5 升级到 6 后，我遇到了遵守验证问题。即使我输入正确的数据，它仍然显示无效。

<form method="POST" action="{{ route('postPasswordReset') }}" data-abide novalidate>
                        {!! csrf_field() !!}
                        @if (Session::has('status'))
                            <p>Password Recovery:</p>
                            <div data-alert class="callout success radius">
                                <i class="fa fa-thumbs-up fa-lead"></i> {{ Session::get('status') }}
                            </div>
                        @else
                            <p>Please enter your email address to recover password.</p>
                            <div data-abide-error class="alert callout" style="display: none;">
                                <p><i class="fi-alert"></i> There are some errors in your form.</p>
                            </div>
                            <div class="row">
                                <div class="small-12 columns">
                                    <label>Email Address
                                        <input type="email" name="email" placeholder="Please enter your email address" required>
                                    </label>
                                </div>
                            </div>

                            <div>
                                <button class="button small radius expanded success btn-block" type="submit">
                                    Send Password Reset Link
                                </button>
                            </div>
                        @endif
                        <div>
                            <a href="{{ route('login') }}">Back to Login Page</a>
                        </div>
                    </form>

Answer 1

例子：

<form id="testForm" data-abide novalidate>
<p>Please enter your email address to recover password.</p>
<div data-abide-error class="alert callout" style="display: none;">
<p><i class="fi-alert"></i> There are some errors in your form.</p>
</div>
<div class="row">
<div class="small-12 columns">
<label>Email Address
<input type="email" name="email" placeholder="Please enter your email address" required>
</label>
</div>
</div>

<div class="row">
<button class="button small radius expanded success btn-block" id="testFormsend">
Send Password Reset Link
</button>
</div>
</form>

<script>
$("#testFormsend").on('click', function(e) {
$("form#testForm").submit();
e.preventDefault();
var invalid_fields = $("form#testForm").find('input.is-invalid-input');
if(invalid_fields.length === 0){
console.log("form ok");
} else {
console.log(invalid_fields);
}
});
</script>