0

I am trying to use jQuery validator script to give client side validation to my form on an app built on Laravel 5.4. Everything is working fine apart from a small display issue.

The form uses bootstrap help-block class to display errors. If I load the errors on page-load as shown below, the error is displayed as a nice small popup alert.

<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                            <label for="email" class="col-md-4 control-label">E-Mail Address</label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required autofocus>

                                @if ($errors->has('email'))
                                <span class="help-block">
                                    <strong>{{ $errors->first('email') }}</strong>
                                </span>
                                @endif
                            </div>
                        </div>

Now I use the client side validation script as below. But then the popup does not show and the span is displayed below the input field.

$("form").validate({
        rules: {
            email: {
                email: true,
                maxlength: 320
            },
            password: {
                minlength: 6
            },
            "password-confirm": {
                equalTo: "#password"
            }
        },
        messages: {
            email: {
                email: "Please enter a valid email address",
                maxlength: "Email is too long"
            },
            password: "Password should be minimum 6 characters long",
            "password-confirm": "Passwords do not match"
        },
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: "span",
        errorClass: "help-block",
        errorPlacement: function (error, element) {
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },
        submitHandler: register_form_submit_handler
    });

Functionality is working fine, I am just trying to make it look a bit cleaner like the default error popups given by Laravel/bootstrap before I injected that client side validation script.

Before Before

After After

Sparky
  • 98,165
  • 25
  • 199
  • 285
Ahmed Shefeer
  • 386
  • 2
  • 12
  • 1
    You're confused. The "before" picture is the default HTML5 validation as provided by inline HTML5 validation attributes and your browser... these popups have absolutely nothing to do with Laravel or Bootstrap. The "after" picture is how jQuery Validate works. If you want jQuery Validate to use popups, then you'll need to create the tooltips or integrate a tooltip plugin. Please make an attempt at this before asking how to do it. – Sparky Jul 07 '17 at 23:33
  • 1
    See this for ideas: https://stackoverflow.com/q/14741688/594235 – Sparky Jul 07 '17 at 23:39

0 Answers0