Home Forums Porto Admin Template validate change password

This topic contains 4 replies, has 2 voices, and was last updated by  Support2 2 months, 1 week ago. This post has been viewed 124 times

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #10029698

    pellesoft
    Participant

    Hi, i am trying to figure out how to make 2 textbox that i am using for changing the password. There is no problem to make the boxes, but how should i do to verify that the two boxes contains the same information before being submitted, and how is it supposed to be when telling the user that there need to be the same text in the two boxes?

    I am looking at the samples in the code but cannot figure out how this could be done the correct way, so i do not interfere with your brilliant code?

    Also, how do i show the “eye” in the textbox so that i can change the visibility of the written password?

    Thanks in advance
    Pell


    #10029699

    pellesoft
    Participant

    <form id=”formSignup” action=”forms-validation.html” class=”form-horizontal” >
    <section class=”card”>
    <header class=”card-header”>
    <div class=”card-actions”>


    </div>

    <h2 class=”card-title”>Basic Form Validation</h2>
    <p class=”card-subtitle”>
    Basic validation will display a label with the error after the form control.
    </p>
    </header>

    <div class=”card-body”>

    <div class=”form-group row”>
    <label class=”col-sm-4 control-label text-sm-right pt-2″>Lösenord <span class=”required”>*</span></label>
    <div class=”col-sm-8″>
    <input id=”pwd” type=”password” title=”Ange ett lösenord” name=”fullname” class=”form-control input-lg” placeholder=”eg.: John Doe” required/>
    </div>
    </div>

    <div class=”form-group row”>
    <label class=”col-sm-4 control-label text-sm-right pt-2″>Ange lösenord igen <span class=”required”>*</span></label>
    <div class=”col-sm-8″>
    <input id=”pwd_confirm” type=”password” title=”Repetera lösenordet” name=”password” class=”form-control input-lg” placeholder=”eg.: John Doe” required/>
    </div>
    </div>
    </div>

    <footer class=”card-footer”>
    <div class=”row justify-content-end”>
    <div class=”col-sm-9″>
    <button class=”btn btn-primary”>Submit</button>
    <button type=”reset” class=”btn btn-default”>Reset</button>
    </div>
    </div>
    </footer>
    </section>

    </form>


    #10029700

    pellesoft
    Participant

    custom.js

    /* Add here all your JS customizations */

    $(“#formSignup”).validate({
    rules: {
    pwd: “required”,
    pwd_confirm: {
    required: true,
    equalTo: “#pwd”
    }
    },
    highlight: function( label ) {
    $(label).closest(‘.form-group’).removeClass(‘has-success’).addClass(‘has-error’);
    },
    success: function( label ) {
    $(label).closest(‘.form-group’).removeClass(‘has-error’);
    label.remove();
    },
    errorPlacement: function( error, element ) {
    var placement = element.closest(‘.input-group’);
    if (!placement.get(0)) {
    placement = element;
    }
    if (error.text() !== ”) {
    placement.after(error);
    }
    }
    });


    #10029701

    pellesoft
    Participant

    Here are the sample code.

    i want then the password retype does not match “equalTo” an error should be presented, like “retype the password..” and it will not be submitted until they are not empty, and matches..

    thanks in advance


    #10029706

    Support2
    Keymaster

    Hello Pell,

    To get the validation working correctly you need change the name of inputs to:

    <input id="pwd" type="password" title="Ange ett lösenord" name="pwd" class="form-control input-lg" placeholder="eg.: John Doe" required/>
    
    and
    
    <input id="pwd_confirm" type="password" title="Repetera lösenordet" name="pwd_confirm" class="form-control input-lg" placeholder="eg.: John Doe" required/>

    * The name should match with the rules on the JS code.

    Regarding the “eye”, Porto Admin don’t comes with a ready code for it. In a brief search on Google we found this codepen code that should help you:
    https://codepen.io/Sohail05/pen/yOpeBm

    Please, try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


Viewing 5 posts - 1 through 5 (of 5 total)