it-swarm.com.ru

Подтвердите пароль с помощью jQuery Validate

Я пытаюсь использовать плагин проверки JQuery для подтверждения ввода пароля.

Однако я не хочу, чтобы это было обязательное поле.

Просто если пользователь хочет сменить пароль, он должен подтвердить его.

Если нет, оба поля не должны быть проверены.

jQuery('.validatedForm').validate({
    rules: {
        password: {
            required: true,
            minlength: 5
        },
        password_confirm: {
            required: true,
            minlength: 5,
            equalTo: "#password"
        }
    }
}); 

Это работает отлично, но опять же, оба поля обязательны для заполнения.

Я хотел бы иметь эту опцию на случай, если кто-то просто захочет изменить, например, свою электронную почту или имя пользователя и оставить пароль в покое.

55
ldrocks

Удалите правило required: true.

Демонстрация: Fiddle

jQuery('.validatedForm').validate({
            rules : {
                password : {
                    minlength : 5
                },
                password_confirm : {
                    minlength : 5,
                    equalTo : "#password"
                }
            }
121
Arun P Johny

Просто быстрый звонок сюда, чтобы надеяться помочь другим ... Особенно с новой версией (так как это 2 года) ...

Вместо определенных статических полей, определенных в JS, вы также можете использовать атрибуты data-rule-*. Вы можете использовать встроенные правила, а также пользовательские правила.

Смотрите http://jqueryvalidation.org/documentation/#link-list-of-built-in-validation-methods для ознакомления со встроенными правилами.

Пример:

<p><label>Email: <input type="text" name="email" id="email" data-rule-email="true" required></label></p>
<p><label>Confirm Email: <input type="text" name="email" id="email_confirm" data-rule-email="true" data-rule-equalTo="#email" required></label></p>

Обратите внимание на атрибуты data-rule-*.

19
Half Crazed

Работает, если значения id и name разные:

<input type="password" class="form-control"name="password" id="mainpassword">
password: {     required: true,     } , 
cpassword: {required: true, equalTo: '#mainpassword' },
5
Krishna Kumar
jQuery('.validatedForm').validate({
        rules : {
            password : {
                minlength : 5
            },
            password_confirm : {
                minlength : 5,
                equalTo : '[name="password"]'
            }
        }

Как правило, вы не будете использовать id="password" как этот . Таким образом, вы можете использовать [name="password"] вместо "#password"

1
PhonPanom

Я реализую это в Play Framework, и для меня это работает так:

1) Обратите внимание, что я использовал data-rule-equalTo во входном теге для идентификатора inputPassword1 . Раздел кода пользовательской формы в моем Модале:

<div class="form-group">
    <label for="pass1">@Messages("authentication.password")</label>
    <input class="form-control required" id="inputPassword1" placeholder="@Messages("authentication.password")" type="password" name="password" maxlength=10 minlength=5>
</div>
<div class="form-group">
    <label for="pass2">@Messages("authentication.password2")</label>
    <input class="form-control required" data-rule-equalTo="#inputPassword1" id="inputPassword2" placeholder="@Messages("authentication.password")" type="password" name="password2">
</div>

2) Так как я использовал валидатор в модальной

$(document).on("click", ".createUserModal", function () {
       $(this).find('#userform').validate({
           rules: {
               firstName: "required",
               lastName: "required",
               nationalId: {
                   required: true,
                   digits:true
               },
               email: {
                   required: true,
                   email: true
               },
               optradio: "required",
               password :{
                   required: true,
                   minlength: 5
               },
               password2: {
                   required: true
               }
           },
           highlight: function (element) {
               $(element).parent().addClass('error')
           },
           unhighlight: function (element) {
               $(element).parent().removeClass('error')
           },
           onsubmit: true
       });

   });

Надеюсь, это поможет кому-то :).

1
Melis