简体   繁体   中英

How do I use Jquery Validate to validate a password but not require it?

I am wondering if anyone has used the Jquery Validate Password plugin ( http://bassistance.de/jquery-plugins/jquery-plugin-password-validation/ ) to validate passwords but not require them.

In my case, I am putting together an edit user form. A user cannot exist without having a password. So when an admin is editing a user, I know that a password has already been validated and assigned to the user.

I want the Admin to be able to submit the form and leave the password fields blank. This means that the password was not changed. But, if the admin does want to change the password, I want to use jquery validate password (linked above) to validate the password.

In my html <head> , I have:

<script src="/Scripts/Common/jquery.js" type="text/javascript"></script>
<script src="/Scripts/Common/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/Common/jquery-validate.password/jquery.validate.password.js" type="text/javascript"></script>
<link href="/Scripts/Common/jquery-validate.password/jquery.validate.password.css" rel="stylesheet" type="text/css" />
<script>
    $(document).ready(function() {
        $("#edit").validate();
        $("#password").valid();
    });
</script>

and in the form field (in Razor and MVC syntax):

@using (Html.BeginForm("Edit", "User", FormMethod.Post, new { id = "edit" })) { 
    @Html.ValidationSummary()
    @Html.HiddenFor(model => model.UserAccount.UserAccountId)

    <!-- other user fields removed for brevity -->

    <table>
        <tr>
            <th>Password</th>
            <td>
                @Html.PasswordFor(x => x.Password, new { id="password", @class="password"})
                @Html.ValidationMessageFor(x => x.Password)
            </td>
            <td>
                <div class="password-meter">
                    <div class="password-meter-message"> </div>
                    <div class="password-meter-bg">
                        <div class="password-meter-bar"></div>
                    </div>
                </div>
            </td>
        </tr>
    </table>

    <p>
        <button type="submit">Save</button> @Html.ActionLink("Nevermind", "Index")
    </p>
}

This works great. Though it requires a password to be entered. Can I modify it to not require the password and only validate it?

just use

$("#edit_form").validate({
    rules: {
        re_password: {
            equalTo: "#password"
        }
    },
    messages: {
        re_password: {
            equalTo: "Password does not match"
        }
    }
});

without use class "required" in input field

<input id="password" type="password" name="password" class="TextBox">
<input id="re_password" type="password" name="re_password" class="TextBox">

Try this

    $(document).ready(function() {
        $("#edit").validate(
           rules: {
              password: { required: false }
           },
        );
        $("#password").valid();
    });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM