SO - 25400062

by Arun P Johny

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.32/jquery.form.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.metadata/2.0/jquery.metadata.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>
<form accept-charset="UTF-8" action="/users" class="form-stacked" id="frmMyProfile" method="post" novalidate="novalidate">
    <div style="margin:0;padding:0;display:inline">
        <input name="utf8" type="hidden" value="âś“">
        <input name="_method" type="hidden" value="put">
        <input name="authenticity_token" type="hidden">
    </div>
    <div class="form-horizontal">
        <div class="form-row control-group">
            <div class="input">
                <label class="control-label" for="user_id">Email ID</label>
                <div class="controls">
                    <input disabled="disabled" type="email" value="[email protected]">
                </div>
            </div>
        </div>
    </div>
    <div class="form-horizontal">
        <div class="form-row control-group">
            <div class="input">
                <label class="control-label" for="user_name">User Name</label>
                <div class="controls">
                    <input name="user[name]" type="text" value="test" class="valid">
                </div>
            </div>
        </div>
    </div>
    <div class="form-horizontal">
        <div...

JavaScript

jQuery(function ($) {
    function passwordRequired() {
        return $('#user_current_password').val().length > 0;
    }
    $('#frmMyProfile').validate({
        rules: {
            "user[current_password]": {
                required: function () {
                    return $('#user_password').val().length > 0 || $('#user_password_confirmation').val().length > 0;;
                }
            },
            "user[password]": {
                required: passwordRequired,
                minlength: {
                    param: 6,
                    depends: passwordRequired
                }
            },
            "user[password_confirmation]": {
                required: passwordRequired,
                minlength: {
                    param: 6,
                    depends: passwordRequired
                },
                equalTo: {
                    param: "#user_password",
                    depends: passwordRequired
                }
            }
        },
        messages: {
            "user[current_password]": "Please enter your current password",
            "user[password]": {
                required: "Please enter new password",
                minlength: "Please enter at least 6 characters"
            },
            "user[password_confirmation]": {
                required: "Please enter confirm password",
                equalTo: "Please enter the same value as the new password."
            }
        }
    });
});