【问题标题】:jQuery:form can not be submitted after using `jquery-validation`'s remote validationjQuery:使用`jquery-validation`的远程验证后无法提交表单
【发布时间】:2016-05-14 18:03:09
【问题描述】:

我正在使用“jquery-validation”https://github.com/jzaefferer/jquery-validation 来验证我的表单,

有一个问题,那就是:

使用jquery-validation的远程验证后无法提交表单。如果删除了远程方法,就可以了。

我应该怎么做?提前谢谢。

查看:

<form id="register" class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}">
    {!! csrf_field() !!}
    <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
        <label class="col-md-4 control-label">Name</label>
        <div class="col-md-6">
            <input type="text" class="form-control" name="name" id="name" value="{{ old('name') }}">
            @if ($errors->has('name'))
                <span class="help-block"><strong>{{ $errors->first('name') }}</strong></span>
            @endif
        </div>
    </div>

    <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
        <label class="col-md-4 control-label">E-Mail Address</label>
        <div class="col-md-6">
            <input type="email" class="form-control" name="email" id="email" value="{{ old('email') }}">
            @if ($errors->has('email'))
               <span class="help-block"><strong>{{ $errors->first('email') }}</strong></span>
            @endif
        </div>
    </div>

    <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
        <label class="col-md-4 control-label">Password</label>
        <div class="col-md-6">
            <input type="password" class="form-control" name="password" id="password">
            @if ($errors->has('password'))
                <span class="help-block"><strong>{{ $errors->first('password') }}</strong></span>
            @endif
        </div>
    </div>

    <div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
        <label class="col-md-4 control-label">Confirm Password</label>
        <div class="col-md-6">
            <input type="password" class="form-control" name="password_confirmation" id="password_confirmation">
            @if ($errors->has('password_confirmation'))
                <span class="help-block"><strong>{{ $errors->first('password_confirmation') }}</strong></span>
            @endif
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-6 col-md-offset-4">
            <button type="submit" class="btn btn-primary">
                <i class="fa fa-btn fa-user"></i>Register
            </button>
        </div>
    </div>
</form>

javascript:

<script>
    $(function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $("#register").validate({
            rules: {
                name: {
                    required: true,
                    rangelength: [4, 30],
                    remote: {
                        url: "{{url('services/validation/verify_name')}}",
                        type: "post"
                    }
                },
                email: {
                    required: true,
                    email: true,
                    minlength: 9,
                    maxlength: 30,
                    remote: {
                        url: "{{url('services/validation/verify_email')}}",
                        type: "post"
                    }
                },
                password: {
                    required: true,
                    rangelength: [6, 20]
                },
                "password_confirmation": {
                    equalTo: "#password"
                }
            },
            errorClass: "has-danger",

            success: function (label, elem) {
                var element = $(elem);
                if (element.is('input[name="name"]')) {
                    label.html("available");
                } else if (element.is('input[name="email"]')) {
                    label.html("available");
                }
            },

            highlight: function (element, errorClass) {
                $(element).fadeOut(function () {
                    $(element).fadeIn();
                });
                $(element).closest(".form-group").addClass(errorClass);
            },
            unhighlight: function (element, errorClass) {
                $(element).closest(".form-group").removeClass(errorClass);
            },
            errorPlacement: function (error, element) {
                error.insertAfter(element);
            }
        });
    });
</script>

【问题讨论】:

  • 远程请求服务器返回什么?可以使用网络选项卡中的浏览器开发工具进行检查
  • 谢谢,我应该把url: "{{url('services/validation/verify_name')}}"这样的网址改成url: "services/validation/verify_name"

标签: javascript jquery forms validation


【解决方案1】:

我应该修改网址:

url: "{{url('services/validation/verify_name')}}",
url: "{{url('services/validation/verify_email')}}",

他们应该是:

url: "services/validation/verify_name",
url: "services/validation/verify_email",

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-01-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多