prgrm prgrm - 1 month ago 5
Javascript Question

jquery validation won't acknoweledge the password confirmation

I am trying to build a form to reset a password. It uses jquery validation. The requirement of the password having 6 characters works, however the password confirmation always says "please instert same value" even though it has the same value. Any ideas?

This is resetpwd.js:

var LoginForm = function () {

// Login form validation
var handleValidation = function() {



// for more info visit the official plugin documentation:
// http://docs.jquery.com/Plugins/Validation
var form = $('#resetpwd');

form.validate({
errorElement: 'span', //default input error message container
errorClass: 'help-block help-block-error', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "", // validate all fields including form hidden input
rules: {
password: {
minlength: 6,
required: true
},
password_confirmation: {
equalTo: "#password"
}
},

highlight: function (element) { // hightlight error inputs
$(element)
.closest('.form-group').addClass('has-danger'); // set danger class to the control group
},

unhighlight: function (element) { // revert the change done by hightlight
$(element)
.closest('.form-group').removeClass('has-danger'); // set danger class to the control group
},

success: function (label) {
label
.closest('.form-group').removeClass('has-danger'); // set success class to the control group
},
});

};


return {
//main function to initiate the module
init: function () {
handleValidation();
}
};

}();

jQuery(document).ready(function() {
LoginForm.init();
});


and this is the HTML

@extends('admin.layouts.layout-resetpassword')

@section('scripts')
<script src="/assets/admin/js/sessions/resetpwd.js"></script>
@stop

@section('content')
<form action="{{route('login.post')}}" id="resetpwd" method="post">
{{csrf_field()}}
<div class="form-group">
<input type="password" class="form-control form-control-danger" placeholder="Neues Passwort" name="password">
</div>
<div class="form-group">
<input type="password" class="form-control form-control-danger" placeholder="Passwort wiederholen" name="password_confirmation">
</div>
<button class="btn btn-theme btn-full">Speichern</button>
</form>


@stop

Answer

Your code references #password, which is looking for an object with an id of password. Add this to your input like below and it should work.

@extends('admin.layouts.layout-resetpassword')

@section('scripts')
    <script src="/assets/admin/js/sessions/resetpwd.js"></script>
@stop

@section('content')
    <form action="{{route('login.post')}}" id="resetpwd" method="post">
        {{csrf_field()}}
        <div class="form-group">
            <input type="password" class="form-control form-control-danger" placeholder="Neues Passwort" name="password" id="password">
        </div>
        <div class="form-group">
            <input type="password" class="form-control form-control-danger" placeholder="Passwort wiederholen" name="password_confirmation" id="password_confirmation">
        </div>
        <button class="btn btn-theme btn-full">Speichern</button>
    </form>
@stop